html – How to display an unordered list in two columns? – Stack Overflow
Posted by jpluimers on 2025/06/05
For a, I wanted to a HTML ul list the SQL keywords in multiple columns I was afraid this would be a tough CSS job, but in practice it was way easier than even explained in the below Stack Overflow answers that made me find
[Wayback/Archive] columns – CSS: Cascading Style Sheets | MDN
The
columns[Wayback/Archive] CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.
TL;DR:
- I used
<ul style="columns:3">...</ul> - For setting column width, this failed in Chrome
<ul style="column-count: 2; column-width: 15em;">...</ul>
but this worked:<ul style="column-count: 2; width: 480px;">...</ul>
Here are the answers:
- [Wayback/Archive] html – How to display an unordered list in two columns? – Stack Overflow (thanks [Wayback/Archive] atp03, [Wayback/Archive] Gabriel and [Wayback/Archive] Winnifred):
Q
With the following HTML, what is the easiest method to display the list as two columns?
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul>Desired display:
A B C D EA
ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }[Wayback/Archive] http://jsfiddle.net/HP85j/8/
…
As pointed out below this will order the columns as follows:
A E B F C G DA
I was looking at @jaider’s solution which worked but I’m offering a slightly different approach that I think is more easy to work with and which I’ve seen to be good across browsers.
ul{ list-style-type: disc; -webkit-columns: 2; -moz-columns: 2; columns: 2; list-style-position: inside;//this is important addition }By default un-ordered list display the bullet position outside but then in some browsers it would cause some display problems based on the browser’s way of laying out your website.
- [Wayback/Archive] html – How to divide list in a single ul into 3 columns – Stack Overflow (thanks [Wayback/Archive] Redshot, [Wayback/Archive] monkeyinsight and [Wayback/Archive] Mohammad Usman):
Q
I have a ul has list inside it. Is it possible to divide the list into 3 columns.
A
ul { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }A
ul { flex-direction: column; flex-wrap: wrap; display: flex; height: 100vh; } ul li { flex: 1 0 25%; }Above css will create the following layout:+--------------------+ | 01 | 05 | 09 | +--------------------+ +--------------------+ | 02 | 06 | 10 | +--------------------+ +--------------------+ | 03 | 07 | 11 | +--------------------+ +--------------------+ | 04 | 08 | 12 | +--------------------+In case you wants the following layout:+-----------------------+ | 1 | 2 | 3 | 4 | +-----------------------+ +-----------------------+ | 5 | 6 | 7 | 8 | +-----------------------+ +-----------------------+ | 9 | 10 | 11 | 12 | +-----------------------+you can use the following css:ul { flex-wrap: wrap; display: flex; } ul li { flex: 1 0 25%; }
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment