How do I justify a horizontal list?
I have a horizontal navbar like the following:
I use CSS to remove the bullet points and make it horizontal.
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
ul selectors, but they’re still left-aligned.
This is strange, because if I use
text-align: right, it behaves as expected.
How do I spread out the links evenly?
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
flex and then change the
justify-content property to either
space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.
justify-content: space-between - ( example here):
justify-content: space-around - (example here):