All menu items with the same width

Question

I've created a responsive menu with 100% width. Is it possible to have all same length for each menu item. At the moment the menu items with the more words have more width than the ones with less words. I hope this makes some sense. Heres my fiddle

My CSS:

nav {
margin: 0 auto; 
text-align: center;
background: #fff;
height:70px;
  width:100%;
}

nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: table;
vertical-align: top;
background: rgba(148,148,149,1);
}

nav ul li {
display: table-cell;
margin: 0;
padding: 0;

}

nav ul li a {
display: block; 
padding: 10px 7px;
color: #000;
text-decoration:none;

}
nav ul li~li { border-left: 1px solid #857D7A; }

nav .active a {
background: rgba(180,85,12,1);
color:#fff;
}

HTML:

 <nav>
<ul>
    <li class="active"><a href="#">Asdfsdfsd</a></li>
    <li><a href="#">Pefsdfsfsdfsdf dgdgdfgo</a></li>
    <li><a href="#">Hsdfsdfe</a> </li>
    <li><a href="#">Csfsdfsdfsfs</a></li>
     <li><a href="#">Visdfsdfcdsfdsfyy</a> </li>
   </ul>

</nav>

http://stackoverflow.com/questions/6885785/how-can-i-create-a-horizontal-menu-with-each-item-being-equal-width-and-spacing — Dinoel Vokiniv, Sep 24 '14 at 17:56

kien · Accepted Answer · 2014-09-24T18:02:21.403

1

Just add this to your "nav ul li":

width: 20%;

Edit: You can go another way as wellby adding this to "nav ul":

table-layout:fixed;

The content of the last item is too long, you can hide by adding this to "nav ul li":

overflow-x: hidden

Check it here: http://jsfiddle.net/vqrde5u4/

edited Sep 24 '14 at 18:02

answered Sep 24 '14 at 17:53

kien

197
9

score 1 · Answer 2 · answered Sep 24 '14 at 17:55

1

You have to set the width of the li tags.

In your CSS:

nav li { width: 20%; /*100% width / 5 elements*/ }

answered Sep 24 '14 at 17:55

proulxs

498
2
13

score 1 · Answer 3 · answered Sep 24 '14 at 18:01

1

Add this:

nav ul{
    //other stuff
    table-layout:fixed;
}

Now, you should also add something like overflow:hidden; so the text won't run off the edge.

answered Sep 24 '14 at 18:01

cppprog

804
3
12
22

All menu items with the same width

3 Answers3