Стилевые параметры списка. li css. Пример

Стилевые параметры списка

Параметры стиля	Значение	Описание
list-style-image (URL-адрес графического изображения маркера)	none	по умолчанию или URL-адрес. Пример: ul {list-style-image: url(images/marker.gif);}
list-style-position (положение маркеров элементов списка)	outside	по умолчанию - вне тела списка
	inside	внутри тела списка
list-style-type (вид маркера)	none	пусто Пример: <ul style="list-style:none">
	circle	окружность
	disc	по умолчанию - темный круг
	square	квадрат
	decimal	десятичный номер
	lower-alpha	строчные буквы
	upper-alpha	прописные буквы
	lower-roman	маленькие римские цифры
	upper-roman	большие римские цифры
list-style (позволяет задать значения сразу всех или некоторых параметров, описанных выше)	значения указываются через пробел	вад_маркера положение URL-адрес
Как увеличить расстояние между элементами списка? Пример: li { margin-top: 1em; }

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

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

Пример 1

<style>
ul.meny {margin: 0; padding: 4px;}
ul.meny li {
display: inline; /* Отображать как строчный элемент */
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

Расположение ссылок в 4 колонки
Расположение ссылок в колонки автоматически
Расположение текста в 2 колонки

<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>

Результат

Сылки А:

Сылки Б:

Сылки С:

Текст:

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

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

Ссылка на статью >>>

вверх