title: how to align all my li on one line?
body: <p>my CSS</p>
  
  <pre><code>ul{
  overflow:hidden;
  }
  li{
  display:inline-block;
  }
  </code></pre>
  
  <p>my HTML</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;a&lt;/li&gt;
  &lt;li&gt;b&lt;/li&gt;
  &lt;li&gt;c&lt;/li&gt;
  &lt;li&gt;d&lt;/li&gt;
  &lt;li&gt;e&lt;/li&gt;
  &lt;li&gt;f&lt;/li&gt;
  &lt;li&gt;g&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>i want to align all my li items in one line, if i did that everything works fine except that when 3 or 4 li's fills the first line on my body they go the the second line, i want them to be on 1 line and everything after the 1 line is filled will be "hidden"</p>
  
  <p>FOR EXAMPLE :: </p>
  
  <p>// NOTE li holds sentences not just 1 letter</p>
  
  <p>OUTPUT NOW ::</p>
  
  <pre><code>a               b                c              d
        e                  f               g
  </code></pre>
  
  <p>DESIRED OUTPUT ::</p>
  
  <pre><code>a                 b              c              d         e      f  //all of them in 1 line and the rest of them are hidden 'overflow:hidden'
  </code></pre>