Главная css Как разместить элементы списка горизонтально/в колонки

Как разместить элементы списка горизонтально

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню.
В таком случае к селектору <LI> следует добавить стилевое свойство display со значением inline, оно преобразует блочный элемент в строчный.

display - свойство, которое определяет, как элемент должен быть показан в документе.

display: значение Описание
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item Элемент выводится как блочный и добавляется маркер списка.
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption Задает заголовок таблицы подобно применению тега <caption>.
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row Элемент отображается как строка таблицы (тег <tr>).
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.
flex Устанавливает элемент как блочный, а его потомки становятся flex элементами.
inline-flex Устанавливает элемент как строчно-блочный, а его потомки становятся flex элементами.

"Меню"
<style>
.meny {margin: 0; padding: 4px;}  
ul.meny li {
   display: inline-block; /* Отображать как строчный элемент */
   margin-right: 5px; 
   border: 1px solid #000000; 
   padding: 5px; 
}
</style>

<ul class="meny"> 
  <li>Ссылка 1</li> <li>Ссылка 2</li> <li>Ссылка 3</li> <li>Ссылка 4</li> <li>Ссылка 5</li>
</ul>

Результат Примера "Меню"
  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
  • Ссылка 4
  • Ссылка 5

Как разместить элементы списка в колонки

Чтобы разместить элементы списка в несколько колонок, надо использовать свойство тега <columns>, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.

2
  1. Расположение ссылок в 4 колонки
  2. Расположение ссылок в колонки автоматически
  3. Расположение текста в 2 колонки 
<style>
  .col-4 { columns: 4; }
  .col-auto{columns: 100px auto; }
  .col-2 { columns: 2 200px; }
</style>

<b>Сылки А:</b>
<ul class="col-4">
   <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
   <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
   <li><a href="#">Ссылка 5</a></li><li><a href="#">Ссылка 6</a></li>
   <li><a href="#">Ссылка 7</a></li><li><a href="#">Ссылка 8</a></li>
   <li><a href="#">Ссылка 9</a></li><li><a href="#">Ссылка 10</a></li>
   <li><a href="#">Ссылка 11</a></li><li><a href="#">Ссылка 12</a></li>
   <li><a href="#">Ссылка 13</a></li><li><a href="#">Ссылка 14</a></li>
   <li><a href="#">Ссылка ААА</a></li>
</ul>

<b>Сылки Б:</b>
<ul class="col-4" style="list-style:none">
  <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
  <li><a href="#">Ссылка БББ</a>
</ul>

<b>Сылки С:</b>
<ul class="col-auto">
   <li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li>
   <li><a href="#">Ссылка 3</a></li><li><a href="#">Ссылка 4</a></li>
   <li><a href="#">Ссылка 5</a></li><li><a href="#">Ссылка 6</a></li>
   <li><a href="#">Ссылка 7</a></li><li><a href="#">Ссылка 8</a></li>
   <li><a href="#">Ссылка 9</a></li><li><a href="#">Ссылка 10</a></li>
   <li><a href="#">Ссылка 11</a></li><li><a href="#">Ссылка 12</a></li>
   <li><a href="#">Ссылка 13</a></li><li><a href="#">Ссылка 14</a></li>
   <li><a href="#">Ссылка ССС</a></li>
</ul>

<b>Текст:</b>
  <div class="col-2">
    Текст Текст Текст Текст Текст Текст Текст Текст Текст 
  </div>

Результат Примера 2
Сылки А: Сылки Б: Сылки С:

Текст:
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript.

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Ссылка на статью >>>

Как добавить к номеру списка круглую скобку

Для добавления скобки используем конструкцию li:before, которая добавляет перед каждым элементом списка некое содержание. В нашем случае - скобка " ) ".
Свойство counter-increment необходимо для увеличения номера списка на единицу.
Значение idnum - это уникальный идентификатор счетчика, имя его задаем сами.

3
<style>
ol {
  list-style-type: none; /* Убираем исходные маркеры */
  counter-reset: idnum;  /* Обнуляем счетчик списка */
}
li:before {
  content: counter(idnum) ') '; /* Добавляем к числам скобку */
  counter-increment: idnum;     /* Задаём имя счетчика */
}
</style>

<ol>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
    <li>Четвертый</li>
 </ol>

Результат Примера 3
  1. Первый
  2. Второй
  3. Третий
  4. Четвертый

Приведённым способом можно делать любой вид нумерованного списка,
например, заключить число в квадратные скобки, в стилях при этом изменится только одна строка:

content: '[' counter(idnum) '] ';
Результат Примера 4
[1] Первый
[2] Второй
[3] Третий
[4] Четвертый

Как изменить вид маркера списка

Пример 5 (нумерованный список)

В Примере 5 меняем счетчик нумерованного списка на свой (my_counter).
Для этого используем свойство сброса счетчика counter-reset совместно со свойством counter-increment, которое увеличивает значение нашего счетчика.
Стиль маркера счетчика задаем с помощью псевдоэлемента ::before в элементе нумерованного списка li.

5 
<style>
  ol.not {
  counter-reset: my_counter;
  padding-left: 10px;
  }
  ol.not li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  margin-top: 0.5em;
  }
  ol.not li::before {
  position: absolute;
  left: 0;  
  counter-increment: my_counter;
  content: counter(my_counter) ". ";
  color:orangered ;
  font-weight: 600;
  }
</style>


<ol class="not">
  <li>Пункт-1</li>
  <li>Пункт-2</li>
  <li>Пункт-3</li>
</ol>

Результат Примера 5
  1. Пункт-1
  2. Пункт-2
  3. Пункт-3

 

Пример 6 (маркированный список)

В Примере 6 заменяем вид маркера (disc - по умолчанию) на свой ("розовый кружочек").
Для этого используем псевдоэлемент ::before в котором прописываем свой вид маркера списка li.

6 
<style>
  ul.not {
  padding-left: 10px;
  }
    
  ul.not li {
    position: relative;
    padding-left: 30px;
    margin-top: 0.5em;
    list-style: none;
    }
    
  ul.not li::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid fuchsia;
    border-radius: 50%;
    }
</style>
    
    
<ul class="not">
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
</ul>

Результат Примера 6