CSS li Columns

24. October 2013 09:49

I ran across a neat trick to render a <ul> element’s list items (<li>) in columns. It was a lot simpler than I thought it would be. Just float the <li> with a width that will give you the number of columns desired.



For example to render a two column list set the width to 50%:

ul.twoColumns li { float:left; width:50%; }

For a five column list:

ul.fiveColumns li { float:left; width:20%; }

Check out the jsfiddle example.

About the author

I'm a .NET developer, a husband and a father of three beautiful girls.

Month List