Page 1 of 1
HTML CSS show li items in multiple columns
Posted: Sat Feb 03, 2018 9:12 pm
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>
Re: HTML CSS show li items in multiple columns
Posted: Sat Feb 03, 2018 9:25 pm
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;