title: HTML/CSS Making a list be in rows, 3 boxes per row?
body: <pre><code>&lt;ul&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item1&lt;/li&gt;
      &lt;li&gt;item1&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Let's say each box is <code>150px</code> wide, so total width per row is <code>450px</code>.
  What I am trying to do is, automatically make the list allow only 3 boxes (list elements) per row, and not make it go under each other.</p>
  <p>I've tried something, and not just asking before trying!</p>
  <p>There's my attempt:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;ul&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
          &lt;li&gt;hreyyy&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  .container {
      width: 450px;
  }
  
  .container ul li {
      width: 150px;
      height: 100px;
      background-color: red;
      float: left;
  }
  
  .container ul {
      display: inline;
  }
  </code></pre>
  <p>Result:</p>
  <p><a href="https://i.stack.imgur.com/lSoiN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lSoiN.png" alt="img" /></a><br />
  <sub>(source: <a href="http://gyazo.com/fc8367ed762c25b29abb94a1e31e4da4.png" rel="nofollow noreferrer">gyazo.com</a>)</sub></p>
  <p>It' doesn't function as I wanted, why?</p>
  <p><em>Is there a plugin for it that makes life easier?</em></p>