HTML CSS show li items in multiple columns

[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]

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;