HTML список в несколько колонок с помощью CSS - простой способ
Для того чтобы вывести стандартный список <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
После:
- Пункт списка 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.
0 Comments
Recommended Comments
There are no comments to display.