Another option, the neatest one and most correct semantically, is to use nested lists, where each column would be a list item in an inline list, each containing a list of items.
The markup and a simple style would be something like:
<style>
ul { float: left; list-style: none; }
ul li {display: inline; }
ul li ul li { display:block; }
</style>
<ul>
<li>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</li>
<li>
<ul>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
</ul>
</li>
<li>
<ul>
<li>Item seven</li>
<li>Item eight</li>
<li>Item nine</li>
</ul>
</li>
</ul>
Of course, the same applies to ordered lists.
Discussion on:
You can also create multi column lists using display:inline for li.
li {
width:180px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
float:left;
display:inline;
}
li {
width:180px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
float:left;
display:inline;
}
- Keyboard Shortcuts:
- Prev
- Next
- Toggle









































