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>

Answer 1

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>