I have a horizontal navbar like the following:
<ul id = "Navigation">
<li><a href = "About.html">About</a></li>
<li><a href = "Contact.html">Contact</a></li>
<!-- ... -->
</ul>
I use CSS to remove the bullet points and make it horizontal.
#Navigation li
{
list-style-type: none;
display: inline;
}
I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul
's space. I tried adding text: justify
to both the li
and ul
selectors, but they're still left-aligned.
#Navigation
{
text-align: justify;
}
#Navigation li
{
list-style-type: none;
display: inline;
text-align: justify;
}
This is strange, because if I use text-align: right
, it behaves as expected.
How do I spread out the links evenly?
The marked answer does not work if has a white space in it.
The top answer here works with white spaces How do I *really* justify a horizontal menu in HTML+CSS?
This can also be achieved using a pseudo element on the
ul
element:Modern Approach - CSS3 Flexboxes
Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.
Just set the parent element's
display
toflex
and then change thejustify-content
property to eitherspace-between
orspace-around
in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.Using
justify-content: space-between
- (example here):Using
justify-content: space-around
- (example here):HTML
CSS
View demo: http://jsfiddle.net/2kRJv/392/
This blog has a satisfyingly robust solution. It needs some slight changes to accommodate a
ul/li
navigation, though:http://jsfiddle.net/mblase75/9vNBs/
You need to use a "trick" to make this work.
See: http://jsfiddle.net/2kRJv/
HTML:
CSS:
Details on IE6/7 trickery: Inline block doesn't work in internet explorer 7, 6