CODEWITHSUNDEEP
csshtml-lists
michi
michi

Reputation: 6625

how to style a <ul> horizontally with its elements in columns?

Consider this HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

I'd like to get this result:

One    Three    Five
Two    Four     Six

Or this:

One      Four
Two      Five
Three    Six

Can this be done with CSS only?

Upvotes: 2

Views: 1675

Answers (2)

Last1Here
Last1Here

Reputation: 1079

CSS3 column would achieve what you are looking for, fiddle and MDN link

ul {
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;  
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

As you can see it still requires vendor prefixes but is supported by all major browsers can I use

Edit

To avoid breaking inside the <li> as @andrew commented on his answer about, add

li {
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
     column-break-inside: avoid;
}

Updated fiddle

Upvotes: 5

AndrewTet
AndrewTet

Reputation: 1182

Yes. You can use inline block on the li elements and make their widths a certain percentage of the ul. Check out the codepen below for an example.

http://codepen.io/anon/pen/eCzKD

Upvotes: 3

Related Questions