HTML CSS show li items in multiple columns

Post Reply
mister_v
Posts: 188
Joined: Thu Mar 04, 2010 9:19 pm

HTML CSS show li items in multiple columns

Post by mister_v »

Hi,

how can I put a list of LI - items in to columns.
Sort like a table, but with adapting the HTML part.

Code: Select all

<ul>
 <li>First</li>
 <li>second</li>
 <li>third</li>
 <li>fourth</li>
</ul>
chris
Site Admin
Posts: 194
Joined: Mon Jul 21, 2008 9:52 am

Re: HTML CSS show li items in multiple columns

Post by chris »

You can use CSS and set inline-block ( with fixed width )
It will set the Li-element next to each other,
and with fixed-width it will look like columns.

Code: Select all

li {display: inline-block; width:200px;}
You can also play with the following in CSS,
but the support depends on browser.

Code: Select all

 
 columns: 2;
 -webkit-columns: 2;
 -moz-columns: 2; 

column-count: 2

  -webkit-column-width: 220px;
  -moz-column-width: 220px;
  -o-column-width: 220px;
  -ms-column-width: 220px;
  column-width: 220px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
Post Reply