Stretch horizontal ul to fit width of div

Question

For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.

Azurite

Answer 1

This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

(or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

This won't work in IE7.

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

_{Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/}

Departed

Is there a way to do the same, but with even gaps between the text-s in the menu? Now the size of the gap depends on the length of the text... – Sardanapalus

@inf3rno: If I understand correctly, adapt this into a menu and it should be what you want. – Departed

Answer 2

People hate on tables for non-tabular data, but what you're asking for is exactly what tables are good at. <table width="100%">

Souse

I would love to do that, but can't for this particular site. I agree though, they're not as bad as some people say! – Azurite

Answer 3

inelegant (but effective) way: use percentages

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

This only works with the 5 <li> example. For more or less, modify your percentage accordingly. If you have other <li>s on your page, you can always assign these particular ones a class of "menu-li" so that only they are affected.

Juieta

also, you might want to consider using the display:inline-block; property for this. Then you can use text-align: center; or something similar on the ul. – Juieta

Thanks, I have to clarify though, each item will be a different width to accommodate longer and shorter links. Updated main post. – Azurite

Answer 4

I Hope that this helps you out... Because I tried all the answers but nothing worked perfectly. So, I had to come up with a solution on my own.

#horizontal-style {
  padding-inline-start: 0 !important; // Just in case if you find that there is an extra padding at the start of the line 
  justify-content: space-around;
  display: flex;
}

#horizontal-style a {
    text-align: center;
    color: white;
    text-decoration: none;
}

Fob