I'd like to stretch 6 nav items evenly across a 900px container, with an even amount of white space between. For instance...
---| 900px Container |---
---| HOME ABOUT BASIC SERVICES SPECIALTY SERVICES OUR STAFF CONTACT US |---
Currently, the best method I can find to do this is the following:
nav ul {
width: 900px;
margin: 0 auto;
}
nav li {
line-height: 87px;
float: left;
text-align: center;
width: 150px;
}
The PROBLEM with this is two fold. First of all, it doesn't truly justify it, but rather spreads the li tags evenly throughout the ul tag.. creating uneven white-space between smaller menu items like "HOME" or "ABOUT" and larger ones like "BASIC SERVICES".
The second problem is that the layout breaks if a nav item is larger than 150px, which SPECIALTY SERVICES is - even though there is more than enough space for the whole nav.
Can anyone solve this for me? I've been scouring the web for solutions, and they all seem to come up short. CSS / HTML only if possible...
Thanks!
UPDATE (7/29/13): Using table-cell is the best modern way to implement this layout. See felix's answer below. The table cell
property works on 94% of browsers currently. You'll have to do something about IE7 and below, but otherwise should be ok.
UPDATE (7/30/13): Unfortunately, there is a webkit bug that impacts this if you're combining this layout with Media Queries. For now you'll have to avoid changing the 'display' property. See Webkit Bug.
UPDATE (7/25/14): There is a better solution to this below now involving text-align: justify. Using this is simpler and you'll avoid the Webkit bug.
This should do it for you.
I'm hesitant to offer this as it misuses ye olde html. It's not a GOOD solution but it is a solution: use a table.
CSS:
HTML:
This is not what tables were created to do but until we can reliably perform the same action in a better way I guess it is just about permissable.
Use
text-align:justify
on the container, this way it will work no matter how many elements you have in your list (you don't have to work out % widths for each list itemFIDDLE
CSS
An ideal solution will:
Using a simple
ul
menu inside of annav
container, we can build a solution that meets the above requirements.HTML
First, we need to force the
ul
to have the full width of itsnav
container. To accomplish this, we will use the:after
psuedo-element withwidth: 100%
.This achieves our goal perfectly, but adds trailing whitespace from the psuedo-element. We can remove this whitespace across all browsers through IE8 by setting the
line-height
of theul
to 0 and setting it back to 100% on itsli
children. See the example CodePen and solution below:CSS
Have you tried setting the li width to, say, 16% with a margin of 0.5%?
edit: I would set the UL to 100% width:
nav ul { width: 100%; margin: 0 auto; }
Instead of defining the width, you could just put a margin-left on your li, so that the spacing is consistent, and just make sure the margin(s)+li fit within 900px.
Hope this helps.