2

I have the following jsfiddle:

.links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-style: normal;
}
<html>

<body>
  <address class="links">
    <p>
    Jeremy is on:
    </p>
    <a href="https://www.linkedin.com/">
      LinkedIn
    </a>
    <a href="https://stackoverflow.com/users/5889131/jeremysprofile">
      Stack Overflow
    </a>
  </address>
</body>

</html>

The output looks like:

              LinkedIn Stack Overflow
Jeremy is on:

I don't understand why. I expect all the elements to be on the same line (or have the later elements wrap underneath, not the first element).

I noted that this happens with a <p> or a <h1> tag, but not a <div> tag on the "Jeremy is on" line. I looked at the default CSS settings for <p> and <div>, but I didn't see anything obvious. I tried making some CSS changes with .p { margin: none; display: inline-flex;} but it didn't make a difference.

Why does a <p> tag get put underneath the links, and a <div> tag not? What CSS rules can I apply to make a <p> tag behave like a <div> tag in this section?

Aleksandr Belugin
  • 2,149
  • 1
  • 13
  • 19
jeremysprofile
  • 10,028
  • 4
  • 33
  • 53

2 Answers2

3

You have a few errors in your CSS. You reference a .p class, when you mean to reference the element directly, p. Also, none is an invalid value for the margin property. The invalid margin value is why the p is appearing to be underneath the links. This is because of the margin that is not being removed as you had expected.

enter image description here

Change this:

.p {
  margin: none;
  display: inline-flex;
}

To this:

p {
  margin: 0;
}

Also, for nicer formatting where the items fill the entire line, I would change inline-flex to flex:

.links {
  display: flex;
  …
}


.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-style: normal;
}

p {
  margin: 0;
}
<address class="links">
  <p>Jeremy is on:</p>
  <a href="https://www.linkedin.com/">
    LinkedIn
  </a>
  <a href="https://stackoverflow.com/users/5889131/jeremysprofile">
    Stack Overflow
  </a>
</address>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
0

Easiest solution is to change the < p > to < span >

If you want to it in CSS you need to remove the . from the p style as this is looking for a class called p and not the element also "none" is not valid for margin, you will need to change it to "unset" or 0 instead

clcordell
  • 57
  • 1
  • 10