title: How to modify the orientation of a <ul> spanning multiple columns?
body: <p>I am producing a <code>&lt;ul&gt;</code> of alphabetically sorted items, which spans over multiple lines. An example of this can be seen here:</p>
  
  <p><a href="http://jsfiddle.net/H4FPw/1/" rel="nofollow">http://jsfiddle.net/H4FPw/1/</a></p>
  
  <p>currently the list is laid out horizontally, as follows:</p>
  
  <pre><code>a  b  c
  
  d  e  f
  
  g  h  i
  
  j  k  l
  </code></pre>
  
  <p>But clients being clients, I have now been asked to change this so that the list is vertically oriented, as follows:</p>
  
  <pre><code>a  e  i
  
  b  f  j
  
  c  g  k
  
  d  h  l
  </code></pre>
  
  <p>Unfortunately I don't know how to do this in the nice and tidy way that I've originally done it.</p>
  
  <p>Can somebody please fill me in if this is possible to do with single <code>&lt;ul&gt;</code> and CSS? Or do I have to make multiple lists?</p>