title: Make <li> fit the width of the <ul> using CSS
body: <p>I'm trying to make the <code>&lt;li&gt;</code> fit the width of the <code>&lt;ul&gt;</code> but even with <code>width:auto</code> it doesn't work at all, and I don't know why. I tried to use <code>display:inline-block</code> 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.</p>
  
  <p>I would like to display the list inline when I display the page on a desktop and display one <code>li</code> per line when I am on a smartphone (with media queries).</p>
  
  <p>I have this:</p>
  
  <pre><code>&lt;ul id='menu'&gt;
      &lt;li class="button"&gt;&lt;a class='current' href='http://'&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button"&gt;&lt;a href='http://'&gt;Products&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button"&gt;&lt;a href='http://'&gt;Support&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button"&gt;&lt;a href='http://'&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button"&gt;&lt;a href='http://'&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and my CSS looks like this:</p>
  
  <pre><code>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;
  }
  </code></pre>