CODEWITHSUNDEEP
htmlcss
strike_noir
strike_noir

Reputation: 4174

Multi column HTML list that goes from top to bottom

Inline HTML list are displayed like this in the browser

item1    item2    item3    item4    item5    ...

Can we achieve something like this using just HTML and CSS

item1    item6    item11
item2    item7    ...
item3    item8
item4    item9
item5    item10

Upvotes: 0

Views: 93

Answers (2)

jackcogdill
jackcogdill

Reputation: 5122

Use the columns property:

ul {
    list-style: none;
    columns:100px 3;
    -webkit-columns:100px 3; /* Safari and Chrome */
    -moz-columns:100px 3; /* Firefox */
}

Here's your demo

If you don't care about order, the more compatible way to do it is to use percents for the li widths:

li {
    display: inline-block;
    min-width: 25%;
    margin-right: 5%;
}

Demo for this code here

Upvotes: 2

Miktown
Miktown

Reputation: 99

Try same like this, with ul for columns inside first ul > li for rows

 <ul>

   <li>
     <ul>
       <li>first item first column</li>
       <li>second item first column</li>
     </ul>
   </li>

   <li>
     <ul>
        <li>first item second column</li>
        <li>second item second column</li>
     </ul>
   </li>

 </ul>

You will need some css trick

 ul ul > li{float:left;}

Upvotes: 0

Related Questions