How to distribute HTML list items evenly in an unordered list
Solution 1
Yet another approach. This is something I use when trying to span a menu evenly across the page. It is nice if you have a dynamic menu that will change depending on certain conditions (like an admin page that only shows up if you are logged in as an admin).
CSS:
nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}
I was kinda lazy, and just copied this from my current project, so you will have to adapt it to fit your code, but it is my preferred method of creating a horizontal menu
EDIT: You can make it look like it spans better by adding this:
CSS:
nav div ul li:first-child {
text-align: left;
}
nav div ul li:last-child {
text-align: right;
}
again, untested, just typed.
Solution 2
You'll need to set the width of the li elements to force them to fill the space:
ul {
width: 100%;
}
li {
float: left;
width: 33%;
}
If you add more items to the list, you'll need to adjust the percentage width - eg with four items, the width will be 25%.
Solution 3
Html:
<ul>
<li>1</li>
<li>2 <br>4</li>
<li>3</li>
</ul>
Css:
ul {
list-style: none;
font-size: 0;
text-align: justify;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
font-size: 100px;
display: inline-block;
}
Solution 4
I have two answers for you.
If you want to stick with the float
model:
Your ul
element needs to have the overflow property set (without this property, your ul
(or any element containing floated elements) is not given a height (this is expected behavior, mind you: http://www.quirksmode.org/css/clearing.html) and will therefore default to a height of 0 - the effect of this will be that if you set different background colors for your ul
/li
and body, the background of your ul
will not seem to display).
ul {
text-align: center;
width: 300px;
overflow: auto;
}
Your li
elements need to have widths set, otherwise - as floated elements - their width will be set to whatever they contain. I've used pixels, below, but you can use a percentage value too.
li {
float: left;
margin: 5px 0 5px 0;
width: 100px;
text-align: center;
}
Use the display:inline-block
property for your li elements (if support for old browsers isn't a priority). IE 7 does not support this, so it's not useful if you need wide cross-browser support, but it creates the effect you want - though make sure you then delete any spaces between your </li>
and <li>
tags, otherwise they will be counted in the overall width and will show up as spaces between the elements.
One advantage that this method has is that you don't have to know or set the width of the container ul
if you use percentage widths on your contained li
elements, you still get the centering for free with the text-align property you already have. This makes your layout very responsive.
Here's markup and CSS that works the way I think you are requesting:
Markup:
<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>
CSS:
li {
display:inline-block;
margin:5px 0 5px 0;
width:33.33%;
}
ul {
text-align: center;
}
- If you'd rather keep the markup on multiple lines, then you'll have to fiddle with the left and right margins of your
li
elements in the CSS. - If you add
li
elements, you'll have to change the percentage width to match (for example, with fourli
elements in your markup, you'd need to change your CSS to have a width of 25% for each one).
at.
Updated on May 19, 2020Comments
-
at. about 4 years
I want my
li
elements that form a horizontal menu to be distributed evenly across the width of myul
element. I normallyfloat
myli
elements to the left and add some margin. But how do I put the proper spacing so they extend from the left of myul
element to the right edge?Here's an example jsfiddle of a menu not distributed across the
ul
.The spacing has to be the same between each
li
. But theli
elements may be different lengths. -
at. over 11 yearsNo, that doesn't work. The spacing has to be the same between each
li
. -
at. over 11 yearsThat seems to make the menu vertical (up and down). I want a horizontal menu with the same spacing between elements.
-
at. over 11 yearsI had to make the
nav
display: table
, theul
display:table-row
and theli
display:table-cell
, then it all worked amazingly well. -
fusion27 over 10 yearsI tested it (in Chrome), then I moved it in to my evernote snippet library :) Thanks @FireCrakcer37 that's some hella CSS right there.
-
Webdevotion over 10 yearsI made a .distributed-navigation class with the code above as it's contents. When using this class I'm also overriding the width of the navigation so the nav element is wider than it's containing parent. This way you do not have to left/right align the 'li:first/last-child'. I adjust the position of the nav. For example: 'nav{ width: 932px; position:relative; left:-6px; }'. Now my nav exceeds the width of it's containing element, but both first and last 'li' are perfectly aligned with the left/right borders of my main block. Every item looks justified correctly.
-
Tom Shaw almost 4 yearsThis is the correct solution..the key is in the justify :) Good answer