Ordered/Unordered List on multiple columns

Question

How can I split a single/one list (ol or ul) into multiple columns?

I saw that css columns property doesn't work: unfortunately, the new column is not interpreted as a new line, so the number (ol) or bullet (ul) of the item does not appear in the new column.

ol,
ul {
  columns: 3;
}

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ol>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

_“so the number (ol) or bullet (ul) of the item does not appear in the new column”_ – they are only hidden outside of the column. Set `list-style-position: inside;` and you’ll see them. — CBroe, Jan 19 '17 at 14:51
@CBroe, yes! thank you so much (admin, sorry for this _avoid_ thanksgiving comment) — Juri, Jan 19 '17 at 14:53

ThisClark · Answer 1 · 2017-01-19T15:01:40.673

4

Vendor prefixes are important in this case. Your code looks different between Firefox and Chrome without the prefixes.

I believe the css column-count property is actually what you're looking for. In addition the column-gap property will add spacing between columns. As others pointed out, the list-style-position: inside; attribute is really what you're looking for.

It should be noted that this solution orders your list vertically so they read from top to bottom then column to column.

ol, ul {
    -webkit-column-count: 3; -webkit-column-gap:20px;
    -moz-column-count:3; -moz-column-gap:20px;
    -o-column-count: 3; -o-column-gap:20px;
    column-count: 3; column-gap:20px;
    list-style-position: inside;
}

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ol>

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

edited Jan 19 '17 at 15:01

answered Jan 19 '17 at 14:45

ThisClark

12,145
9
61
89

1

Related: http://stackoverflow.com/questions/6509106/is-there-a-way-to-break-a-list-into-columns – ThisClark Jan 19 '17 at 14:46
thanks. But, before Item #3, however, does not appear the number 3 or the bullet of the list ... (which appears only near first two item of the first column)... – Juri Jan 19 '17 at 14:50
sorry: my browser doesn't show numer/bullet, but they were, thanks (I saw them width `list-style-position: inside` css property). – Juri Jan 19 '17 at 14:58
I saw the code on Firefox, now: many thanks for your recommended code, now works in that browser. – Juri Jan 19 '17 at 15:08

score 4 · Accepted Answer · answered Jan 19 '17 at 14:53

4

Columns are still a bit buggy. Your example looks fine in Firefox (as long as you've added the -moz- prefix so it works at all). In Chrome, it cuts off the bullet/number as you describe—but you can add list-style-position: inside to change where it gets drawn. This works great if your list items are all one line, but it does change the appearance if they extend to multiple lines.

answered Jan 19 '17 at 14:53

Blorf

486
3
11

1

Also of note: in the future, your original example code should just work as-is. Unfortunately, today, we still have to wait for browsers to catch up. – Blorf Jan 19 '17 at 15:10

Ordered/Unordered List on multiple columns

2 Answers2