When reading lists of items in a multi-column layout, it’s awkward when part of an item breaks on to the next column. Perhaps messing with the display properties of the li would fix it. So after adding display of inline-block, SUCCESS! All of the items content stays together. Enter the next issue.
Now we introduced another issue. Bullets are gone.
My initial thought was the inline-block was hiding the bullets somehow, so I tried messing with the margin and padding. After some frustration and web searching, I find this. If you inspect a list item in its purest form, it has a display of “list-item”. By setting “inline-block” on our li’s we lost the bullet. No problem! By making use of “content”, we can add that right back in. The downside of this, is that you’ll have to set up the sub-lists as well. So now we’re up to this:
Pay close attention to the third and fourth item in the image below.
Since we were mostly dealing with list items with a lot of text, we didn’t notice right away that some of the list items were showing up on the same line. The answer to this is a little more straight-forward. Just set a width of 100% on the li’s and done.
As mentioned at the beginning, we’re building for all screen sizes here. So initially, we should have NO column counts set. Depending on the content and how the columns scale, column counts should gradually increase as the screen width increases. Once all the styles are in place, we end up with nicely formatted lists as shown below (includes a sub-list):
To see an example of these lists in action, check out the demo page. Just make sure you use a browser that supports “column-count” (Firefox 2+, Chrome 4+, Opera 11.1+, Safari 3.1+ or IE 10+). Change the browser width to view the changes in behavior on the final list.