Make <li> fit the width of the <ul> using CSS

Question

I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.

I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).

I have this:

<ul id='menu'>     <li class="button"><a class='current' href='http://'>Home</a></li>     <li class="button"><a href='http://'>Products</a></li>     <li class="button"><a href='http://'>Support</a></li>     <li class="button"><a href='http://'>Contact</a></li>     <li class="button"><a href='http://'>Contact</a></li> </ul> 

and my CSS looks like this:

ul#menu { margin:0; padding:0; list-style-type:none; width:100%; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; /*border-bottom:1px solid #000000; border-top:1px solid #000000;*/ }  li.button { background:transparent url(../images/nav_bg.png) repeat-x top left; height:30px; width:auto; }    ul#menu li { display:inline-block; margin:0; padding:0; width:auto; }  ul#menu li a { display:inline-block; color:#999999; text-decoration:none; font-weight:bold; padding:8px 20px 0 20px; width:auto; }  ul#menu li a:hover {    color:#FFFFFF; height:22px; background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;        }   ul#menu li a.current { display:inline-block; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat;   margin:0; } 

Answer 1

I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:

ul {   width: 100%;   display: table;   table-layout: fixed; /* optional */ }  ul li {   display: table-cell;   width: auto;   text-align: center; } 

Basically, it emulates a table. Works in Gecko, Webkit, IE8+. For IE7 and downwards you should use some inline-block hackery :)

JSFiddle