Jump to content

HTML список в несколько колонок с помощью CSS - простой способ


Печенег

763 views

 Share

Для того чтобы вывести стандартный список <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.

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Privacy Policy и Guidelines, в ином случаи просто покиньте его.