Jamie Kane Jamie Kane - 1 month ago 8
CSS Question

display:inline doesnt work but display:flex does

So, I am able to get a horizontal nav bar one way but not the other, and I am getting confused as to why. Strange things happen when I use

float:left
as well, so I'm not sure if I've got my elements labeled in the best format. The relevant html and css are below:

<nav class="main-nav">
<ul class="navtext">
<li><a href="index.html">Index</a></li>
<li><a href="p2.html">P2</a></li>
<li><a href="p3.html">P3</a></li>
</ul>
</nav>




.main-nav {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 60px;
padding-right: 60px;
background-image: url("images/navimage.jpg");
text-align: center;
border: solid 10px black;
font-size: 20px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.navtext {
list-style: none;
padding: 3rem;
margin: none;
display: flex;
}


I've tried doing the whole nav as main-nav but then list style: none has no effect

EDIT: I'm also having difficulties getting the padding to effect the gaps between index p2 and p3. I'm putting padding into the
.navtext
and it just effects the padding around all three links treated as one rather than padding between them all.

Answer

display:inline says, "Hey, treat this element exactly as if it was a piece of text, like an em, span, or a element." You can't specify the width of an inline element; it just takes up as much space as the text inside it, which is why it's not working for your ul. 99% of the time, you only want to use display:inline on actual text. You probably don't want it on a ul, since a ul is a container for text, and isn't actually text itself.

display:block makes the element expand to fill up the width of its container, unless you specify a width. So if you put display:block on your ul, it will expand to fill the width of your nav element.

display:flex is a fairly new feature that has the same behavior as display:block, but then lots of other cool stuff too with you're not currently using, like making everything inside the element expand to fill up available space.

display:inline-block is like display:inline in that elements "flow" with the text around them, and like display:block in that you can specify the element's width.

If this was 5 years ago, before most web browsers supported display:flex, you'd probably want display:block on the ul and display:inline-block on the li. But today, display:flex is a great option for nav bars.