title: Multiple column lists from one <ul>, CSS and maybe a bit of JS
body: <p>Look at my HTML code (let's say I have 100's of links in this manner):</p>
  
  <p>&lt;-- language: lang-html --></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link5&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link6&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link7&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link8&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link9&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/link.html"&gt;Link10&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you see it's one <code>&lt;ul&gt;</code> with many <code>&lt;li&gt;</code> inside.</p>
  
  <p><strong>I would like this to look like this on page (5 columns):</strong></p>
  
  <pre><code>Link1  Link3  Link5  Link7  Link9
  Link2  Link4  Link6  Link8  Link10
  </code></pre>
  
  <p>This URL has something similar explained: <strong><a href="http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/" rel="nofollow noreferrer">http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/</a></strong> however it causes different positioning of the links, <em>instead of listing going down, it goes to the right</em>, so the links end up looking like this:</p>
  
  <pre><code>Link1  Link2  Link3  Link4  Link5
  Link6  Link7  Link8  Link9  Link10
  </code></pre>
  
  <p>I am not using any JavaScript framework on site, so I would like to have this done with only CSS and just a little of framework independent JavaScript.
  Any solutions for this?</p>