title: CSS make UL list wrap LI
body: <p>I want to make the UL (yellow) wrap the LI list elements (purple) horizontally <strong>without any fixed widths on the UL</strong>. The wrap has been added for the example.</p>
  
  <p><strong>HTML</strong>
      </p>
  
  <pre><code>  &lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrap {
    background: green;
    width: 500px;
    padding: 10px 20px;
  }
  
  li {
    display: inline-block;
    width: 70px;
    height: 50px;
    background: purple;
    list-style: none;
  }
  
  ul {
    background: yellow;
    margin: 0; padding: 0;
  }
  </code></pre>
  
  <p>Currently</p>
  
  <p><img src="https://i.stack.imgur.com/YpqOR.png" alt="Current CSS"></p>
  
  <p>Desired</p>
  
  <p><img src="https://i.stack.imgur.com/cwTNa.png" alt="Desired CSS"></p>
  
  <p>CodePen here: <a href="http://codepen.io/ptimson/pen/IrCHB" rel="nofollow noreferrer">http://codepen.io/ptimson/pen/IrCHB</a></p>