Is there a way to break a list into columns?

by

The CSS solution is: http://www.w3.org/TR/css3-multicol/

The browser support is exactly what you’d expect..

It works “everywhere” except Internet Explorer 9 or older: http://caniuse.com/multicolumn

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

See: http://jsfiddle.net/pdExf/

If IE support is required, you’ll have to use JavaScript, for example:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

See: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

You could apply that fallback with Modernizr if you’re already using it.

More Related Contents:

  1. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  2. How can I center into a div?
  3. Adjust list style image position?
  4. How can I reset a CSS-counter to the start-attribute of the given list
  5. How can I create multi columns from a single unordered list?
  6. Custom li list-style with font-awesome icon
  7. Customize list item bullets using CSS
  8. How to style the number on a html list?
  9. Excessive Spaces Between Words [closed]
  10. Order columns through Bootstrap4
  11. Align child elements of different blocks
  12. Is there a way to apply a CSS style on HTML5 datalist options?
  13. Show Child Div within Hidden Parent Div
  14. Responsive Separator for Horizontal List
  15. Style element based on selected
  16. How to animate a radial-gradient using CSS?
  17. Applying CSS styles only to certain elements
  18. Removing ul indentation with CSS
  19. angularjs: ng-src equivalent for background-image:url(…)
  20. Failed to decode downloaded font
  21. CSS Grid – Auto height rows, sizing to content
  22. Which HTML5 reset CSS do you use and why? [closed]
  23. Prevent flex item from exceeding parent height and make scroll bar work
  24. ‘Inverted’ border-radius possible? [duplicate]
  25. CSS Sticky Footers with Unknown Height
  26. Is a relative path in a CSS file relative to the CSS file?
  27. Can you add noise to a CSS gradient?
  28. What does a `~` tilde in a CSS `url()` do?
  29. placing background image in a rhombus shaped container is causing the container to lose its shape
  30. prevent a pseudo element from triggering hover?

Leave a Comment