Hoe kun je 1 lijst <ul> opsplitsen in meerdere lijsten zonder toevoeging van extra HTML code? Heel eenvoudig, laat de lijst items er zelf voor zorgen, door er afmetingen aan te geven.

HTML

<ul class="col2">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
  <li>consectetuer</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

CSS

ul {
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li {
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.col2 li  { width:50%;}
.col3 li  { width:33.333%; }
.col4 li  { width:25%; }
.col6 li  { width:16.666%; }

<