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?
How do I *really* justify a horizontal menu in HTML+CSS?
You find plenty of tutorials on menu bars in HTML, but for this specific (though IMHO generic) case, I haven’t found any decent solution: # THE MENU ITEMS SHOULD BE JUSTIFIED JUST AS PLAIN TEXT WOULD
How do I fully-justify latex code on EMACS
I want to fully-justify latex code on EMACS so that my latex code will look better. For example, I remember my advisor sending me latex in fully justified way like this: In ~/cite{Hummel2004}, authors
How do I create a list of horizontal items?
I’m trying to create a list of horizontal items so they can be used as navigation. But for some reason, setting display to inline is not working. I have also tried setting display to inline-block with
How do I add a horizontal scrollbar in a listview?
How do I add a horizontal scrollbar in a listview?
“text-align: justify;” inline-block elements properly?
A few other questions have already addressed how best to apply text-align: justify to get inline-block elements to spread out evenly… for example, How do I *really* justify a horizontal menu in HTML+C
How do I justify strings in a listbox?
I am binding values to list box but string not showing in proper format. ex my strings like abc 10 abcd 20 asdfas 30 I made fixed length to first string that is 30 using padding str1.PadRight(30) +
How to Center-Justify text in CSS?
How can I center-justify text? Currently, justify does not center the last line.
How do I hide the text links over a toggleable horizontal list with background images
I’m trying to create a UL/LI horizontal list with background images only, with no text link visible. The reason for this is so that when I over over a list item, the background would rollover and when
How do I center or justify buttons in a div?
I’m creating a div with a bunch of buttons inside <div> <button>a</button><button>b</button> </div> I want the buttons to appear justified or centered in the div.
How do I change the following vertical list to horizontal list?
The following coding gives an output of a list in a vertical manner. How do I adjust this to make it in horizantal list? For example like this: http://www.nol.com.sg/wps/portal/nol <body> <
Answers
You need to use a “trick” to make this work.
See: http://jsfiddle.net/2kRJv/
HTML:
<ul id="Navigation"> <li><a target="_blank" rel="nofollow" href="About.html">About</a></li> <li><a target="_blank" rel="nofollow" href="Contact.html">Contact</a></li> <!-- ... --> <li class="stretch"></li> </ul>
CSS:
#Navigation { list-style-type: none; text-align: justify; height: 21px; background: #ccc } #Navigation li { display: inline } #Navigation .stretch { display: inline-block; width: 100%; /* if you need IE6/7 support */ *display: inline; zoom: 1 }
Details on IE6/7 trickery: Inline block doesn’t work in internet explorer 7, 6
This might suit your needs:
#Navigation{ } #Navigation li{ list-style-type: none; text-align: center; float: left; width: 50%; /*if 2 <li> elements, 25% if 4...*/ }
demo : http://jsfiddle.net/KmqzQ/
HTML
<ul id="Navigation"> <li><a target="_blank" rel="nofollow" href="#">The Missing Link</a></li> <li><a target="_blank" rel="nofollow" href="#">About</a></li> <li><a target="_blank" rel="nofollow" href="#">Riluri</a></li> <li><a target="_blank" rel="nofollow" href="#">Contact us</a></li> <!-- ... --> <li class="stretch"></li> </ul>
CSS
#Navigation { list-style-type: none; text-align: justify; height: 21px; background: #ccc } #Navigation li{ display: inline } #Navigation li a { text-align: left; display:inline-block; } #Navigation .stretch { display: inline-block; width: 100%; /* if you need IE6/7 support */ *display: inline; zoom: 1 }
View demo: http://jsfiddle.net/2kRJv/392/
This can also be achieved using a pseudo element on the ul element:
ul { margin: 0; padding: 0; list-style-type: none; text-align: justify; } ul:after { content: ""; width: 100%; display: inline-block; } li { display: inline; }
This blog has a satisfyingly robust solution. It needs some slight changes to accommodate a ul/li navigation, though:
#Navigation { width: 100%; padding: 0; text-align: justify; font-size: 0; font-size: 12px/9; /* IE 6-9 */ } #Navigation>li { font-size: 12px; text-align: center; display: inline-block; zoom: 1; *display: inline; /* IE only */ } #Navigation:after { content:""; width: 100%; display: inline-block; zoom: 1; *display: inline; }
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?
You need to have the <li> elements separated, otherwise the justify won’t work.
For example, this: <ul><li>test</li><li>test</li></ul> needs to be like this: <ul> <li>test</li> <li>test</li> </ul>
or at least have spaces between the opening and closing <li> tags.
Just do:
ul { width:100%; } ul li { display:table-cell; width:1%; }
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 to flex and then change the justify-content property to either space-between or space-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):
ul { list-style: none; padding: 0; margin: 0; } .menu { display: flex; justify-content: space-between; }
<ul class="menu"> <li>About</li> <li>Contact</li> <li>Contact Longer Link</li> <li>Contact</li> </ul>
Using justify-content: space-around – (example here):
ul { list-style: none; padding: 0; margin: 0; } .menu { display: flex; justify-content: space-around; }
<ul class="menu"> <li>About</li> <li>Contact</li> <li>Contact Longer Link</li> <li>Contact</li> </ul>