title: How to display inline several <li> with 100% width?
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;ul&gt;
      &lt;li&gt;element 1&lt;/li&gt;
      &lt;li&gt;element 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>applied with a css as follows:</p>
  
  <pre><code>#container { width:100%; overflow:auto; }
  #container ul { width: 100%; }
  #container li { width: 100%; }
  </code></pre>
  
  <p>So now I would like to have an indeterminate number of elements (<code>&lt;li&gt;</code>) all with 100% width (so they can adjust accordingly to the browser's window size) but all side by side, displaying the horizontal scroll bar in the container.</p>
  
  <p>I have tried putting "display:inline" on ul's css, and "float:left" on li's css, but with no success.</p>
  
  <p>Any suggestions?</p>
  
  <p>Also, try to consider I'm trying to make this as "cross-browser compatible" as possible.</p>
  
  <p>Thanks in advance.</p>