46

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.

Glenn
  • 4,195
  • 9
  • 33
  • 41

4 Answers4

111

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/

Wilfred Hughes
  • 29,846
  • 15
  • 139
  • 192
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 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... – inf3rno Apr 29 '13 at 07:08
  • @inf3rno: If I understand correctly, adapt [this](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs) into a menu and it should be what you want. – thirtydot May 07 '13 at 09:08
5

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

Shad
  • 15,134
  • 2
  • 22
  • 34
  • 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! – Glenn Mar 03 '11 at 21:31
2

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.

gailbear
  • 519
  • 3
  • 13
  • 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. – gailbear Mar 03 '11 at 21:28
  • Thanks, I have to clarify though, each item will be a different width to accommodate longer and shorter links. Updated main post. – Glenn Mar 03 '11 at 21:35
0

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;
}
Preet
  • 1