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

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

Звезда активнаЗвезда активнаЗвезда активнаЗвезда не активнаЗвезда не активна3 / 5

Мы расскажем вам, как выравнять элементы маркированного списка по горизонтали.

По-умолчанию элементы списка располагаются вертикально друг под другом.

Для того, чтобы выравнять их по горизонтали необходимо использовать свойство display для <li> элементов.

Код HTML -разметки одинаков для всех методов:

Первый, самый древний способ — в качестве значения display выставляем inline . Так же для наглядности выставим границу в 1px :

Вот как это будет выглядеть:

  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Это более современный вариант, в качестве значения display ставим inline-block . Это значит, что <li> элементы станут блочными но расположены будут в строчку, в некоторых случаях нужен именно такой вариант:

  • Первый
  • Второй
  • Третий

В этом случае так же добавляются стандартные отступы между элементами, если они вам не нужны то смотрите Третий способ.

Последний вариант более специфичен. Сначала задаем свойству display значение block , сделав элементы блочными, а потом при помощи свойства float, прижимаем их к левому краю.

В этом случае так же лучше задавать тегу <ul> свойство overflow со значением hidden , иначе браузер "не почувствует" элементов списка.

  • Первый
  • Второй
  • Третий

Отличительная особенность этого способа в том, что между элементами нету никаких отступов стандартных и их можно регулировать самому при помощи свойств margin и padding .

Справочник по CSS (ЦСС) и HTML ШТМЛ

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

Валидный HTML
Валидный CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальный список</title>
<style type="text/CSS (ЦСС)">
ul.hr <
margin: 0; /* Обнуляем значение отступов */
padding: 0; /* Обнуляем значение полей */
>
ul.hr li <
display: inline; /* Отображать как встроенный элемент */
margin-right: 5px; /* Отступ слева */
border: 1px solid #000; /* Рамка вокруг контента */
padding: 3px; /* Поля вокруг контента */
>
</style>
</head>
<body>
<ul /> <li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя параметры margin и padding к селектору UL , как показано в примере.

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

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

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

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

  • Ссылка 1
  • Ссылка 2
  • Ссылка 3
  • Ссылка 4
  • Ссылка 5
Как разместить элементы списка в колонки

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

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

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

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

Как добавить к номеру списка круглую скобку
  1. Первый
  2. Второй
  3. Третий
  4. Четвертый

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *