HTML CSS examples for CSS Widget:UL Column
Using column-count together with ::before for UL
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> li {<!-- ww w. j a v a2 s .c o m--> list-style-type: none; margin-left: 1.5em; line-height: 1.25em; break-inside: avoid; } li:before { content: ''; width: 0.7em; height: 0.7em; display: block; float: left; margin: 0 .5em 0 -1.3em; background-color: blue; position: relative; top: .25em; } ul#withColumCountAndBefore { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } </style> </head> <body> <h2>ul without column count</h2> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <h2>ul with column count (using :before and float)</h2> <ul id="withColumCountAndBefore"> <li>1</li> <li>2 this is a test this is a test this is a test</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>