Для того чтобы вывести стандартный список <ul><li></li>....</ul> - маркированный или <ol><li></li>....</ol> - нумерованный список в несколько колонок достаточно прописать к нему в CSS стили:
ul {
list-style-position: inside;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
До:
Пункт списка 1
Пункт списка 2
Пункт списка 3
Пункт списка 4
Пункт списка 5
Пункт списка 6
Пункт списка 7
Пункт списка 8
Пункт списка 9
Пункт списка 10
Пункт списка 11
Пункт списка 12
После:
ul.marker-none {
list-style-position: inside;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
list-style: none;
}
Пункт списка 1
Пункт списка 2
Пункт списка 3
Пункт списка 4
Пункт списка 5
Пункт списка 6
Пункт списка 7
Пункт списка 8
Пункт списка 9
Пункт списка 10
Пункт списка 11
Пункт списка 12
В последнем варианте ещё убрали маркеры списка прописав дополнительный стиль:
ul {
...
list-style: none;
...
}
Пример:
See the Pen
HTML список в несколько колонок с помощью CSS by ITwing (@itwing)
on CodePen.