CSS. Как поставить список в одну строку?
.complex_list ul li — Это значит «все li внутри ul, который внутри complex_list». Селектор неправильный, должен быть ul.complex_list li — «все li внутри ul с классом complex_list» и заработает.
Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list < display: flex; >:
* < margin: 0; padding: 0; >.header < background-color: #169; color: white; text-align: center; height: auto; font: 1.6em arial; padding: auto; >.complex_list < background-color: #2bd; padding: 4px; >ul.complex_list < display: flex; >.complex_list li < font: 0.75em arial; list-style: none; >.complex_list li a < text-decoration: none; margin: 2px; color: #fff; >.complex_list li a:hover
Как разместить пункты списка горизонтально?
Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).
Пример 1. Горизонтальный список
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .
Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.
См. также
- display
- display в CSS
- Блочные элементы
- Использование в вёрстке
- Описание float
- Открываем блочную модель
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
Стилизация списков
Списки, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.
| Требования: | Базовая компьютерная грамотность, основы HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), CSS основы по тексту и шрифтам. |
|---|---|
| Цель: | Познакомиться с лучшими практиками и свойствами по стилизации списков. |
Пример простого списка
Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)
HTML для нашего примера списка представлен ниже:
h2>Shopping (unordered) listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> ul> li>Hummusli> li>Pitali> li>Green saladli> li>Halloumili> ul> h2>Recipe (ordered) listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> ol> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol> h2>Ingredient description listh2> p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. p> dl> dt>Hummusdt> dd> A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients. dd> dt>Pitadt> dd>A soft, slightly leavened flatbread.dd> dt>Halloumidt> dd> A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. dd> dt>Green saladdt> dd>That green healthy stuff that many of us just use to garnish kebabs.dd> dl>
Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:
- Элементы и имеют верхний и нижний margin по 16px ( 1em ) и padding-left 40px ( 2.5em .)
- Объекты списка (элементы ) не имеют заданных значений по умолчанию для интервалов.
- Элемент имеет верхний и нижний margin по 16px ( 1em ), но padding не задан.
- Элементы имеют margin-left 40px ( 2.5em .)
- Элементы которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px ( 1em ), точно так же, как и различные типы списков.
Управление интервалами списков
При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть законченный стилизированный пример на Github, а также найти исходный код.)
CSS, используемый для оформления текста и интервалов, выглядит следующим образом:
/* Базовые стили */ html font-family: Helvetica, Arial, sans-serif; font-size: 10px; > h2 font-size: 2rem; > ul, ol, dl, p font-size: 1.5rem; > li, p line-height: 1.5; > /* Задаём стили для списка описаний */ dd, dt line-height: 1.5; > dt font-weight: bold; > dd margin-bottom: 1.5rem; >
- Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
- Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
- Правило 4 задаёт одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
- Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.
Стили специфичные для списков
Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов или :
- list-style-type (en-US): задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
- list-style-position (en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
- list-style-image : позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.
Стили маркеров
Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:
ol list-style-type: upper-roman; >
Это даёт нам следующий вид:
Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).
Позиция маркера
Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside , которое заставляет маркеры находится снаружи пунктов списка, как видно выше.
Если вы установите значение на inside , то маркеры будут находиться внутри строк:
ol list-style-type: upper-roman; list-style-position: inside; >
Использование пользовательского изображения как маркер
Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:
ul list-style-image: url(star.svg); >
Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background , о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!
В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):
ul padding-left: 2rem; list-style-type: none; > ul li padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; >
Мы сделали следующее:
- Установили padding-left элемента с 40px по умолчанию на 20px , затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
- Установили list-style-type (en-US) на none , для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
- Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
- background-image : Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
- background-position : Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0 , что значит что маркер будет появляться в самом верху слева каждого пункта списка.
- background-size : Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem ( 16px ), что очень хорошо сочетается с отступом (padding) 20px , который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
- background-repeat : По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat .
Это даёт нам следующий результат:
короткая запись list-style
Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:
ul list-style-type: square; list-style-image: url(example.png); list-style-position: inside; >Может быть заменён этим:
ul list-style: square url(example.png) inside; >Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc , none , и outside ). Если указаны и type и image , тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.
Контроль счета списка
Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.
start
Атрибут start позволит вам начать счёт списка с цифры отличной от 1. Например:
ol start="4"> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol>
что даст вам такой результат:
reversed
Атрибут reversed начнёт отсчёт по убыванию вместо возрастания. Например:
ol start="4" reversed> li>Toast pita, leave to cool, then slice down the edge.li> li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li>Wash and chop the salad.li> li>Fill pita with salad, hummus, and fried halloumi.li> ol>
что даст вам такой результат:
Примечание: Если пунктов в списке в обратном списке больше, чем значение атрибута start , счёт продолжится до нуля и далее отрицательные значения.
value
Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:
ol> li value="2">Toast pita, leave to cool, then slice down the edge.li> li value="4"> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. li> li value="6">Wash and chop the salad.li> li value="8">Fill pita with salad, hummus, and fried halloumi.li> ol>
что даст вам такой результат:
Примечание: Даже если вы используете нечисловой list-style-type (en-US), вам всё равно надо использовать эквивалентное цифровое значение в атрибуте value .
Активное изучение: Стилизация вложенного списка
В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:
- Задали неупорядоченному списку квадратные маркеры.
- Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
- Задали упорядоченному списку маркеры в виде строчных букв.
- Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.
Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.
div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> h2>HTML Inputh2> textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> ul> li>First, light the candle.li> li>Next, open the box.li> li>Finally, place the three magic items in the box, in this exact order, to complete the spell: ol> li>The book of spellsli> li>The shiny rodli> li>The goblin statueli> ol> li> ul>textarea > h2>CSS Inputh2> textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">textarea> h2>Outputh2> div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;">div> div class="controls"> input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;" /> input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;" /> div> div>
var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; var cssCode = cssInput.value; var output = document.querySelector(".output"); var solution = document.getElementById("solution"); var styleElem = document.createElement("style"); var headElem = document.querySelector("head"); headElem.appendChild(styleElem); function drawOutput() output.innerHTML = htmlInput.value; styleElem.textContent = cssInput.value; > reset.addEventListener("click", function () htmlInput.value = htmlCode; cssInput.value = cssCode; drawOutput(); >); solution.addEventListener("click", function () htmlInput.value = htmlCode; cssInput.value = "ul \n\nul li, ol li \n\nol "; drawOutput(); >); htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput);
Смотрите также
Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:
Заключение
В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 2 дек. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Горизонтальный список в HTML
Верстать списки в HTML можно и горизонтальные, и вертикальные. Нас интересует создание горизонтального списка. Мы помним, что маркированные списки в HTML задаются парными тегами «ul» и «li», а нумерованные списки тегами «ol» и «li». Как же сделать горизонтальный список в HTML, чтобы все пункты отображались в одну строку?
Чтобы список был горизонтальные и перечисление данных в списке имело горизонтальный вид следует к тегу «ul» добавить правило в css list-style:none; (это правило убирает маркировку списка, поэтому прописывать его нужно по мере необходимости) а для тега «li» display: block; и float: left; тоже получится выровнять список в строку и без отступов между элементами. Например:
ul.menu < border:0; background:#fff; border:solid 0px #eee; list-style:none; /* Убирает маркировку списка */ >.module_content ul.menu < border:0; >ul.menu li
Есть ещё один способ, который я нашла, но у меня он не заработал, к сожалению. Нужно к тегу «li» добавить в css правило display: inline; Например:
ul li < display: inline; /* Отображать как строчный элемент */ >
Ну вот, в принципе, и всё. Горизонтальный список готов! 🙂
Как разместить элементы списка горизонтально?
Вывести маркированный список в одну строку и убрать отображение маркеров.
Решение
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).
Пример 1. Горизонтальный список
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Горизонтальный список в HTML
Верстать списки в HTML можно и горизонтальные, и вертикальные. Нас интересует создание горизонтального списка. Мы помним, что маркированные списки в HTML задаются парными тегами «ul» и «li», а нумерованные списки тегами «ol» и «li». Как же сделать горизонтальный список в HTML, чтобы все пункты отображались в одну строку?
Чтобы список был горизонтальные и перечисление данных в списке имело горизонтальный вид следует к тегу «ul» добавить правило в css list-style:none; (это правило убирает маркировку списка, поэтому прописывать его нужно по мере необходимости) а для тега «li» display: block; и float: left; тоже получится выровнять список в строку и без отступов между элементами. Например:
ul.menu < border:0; background:#fff; border:solid 0px #eee; list-style:none; /* Убирает маркировку списка */ >.module_content ul.menu < border:0; >ul.menu li
Есть ещё один способ, который я нашла, но у меня он не заработал, к сожалению. Нужно к тегу «li» добавить в css правило display: inline; Например:
ul li < display: inline; /* Отображать как строчный элемент */ >
Ну вот, в принципе, и всё. Горизонтальный список готов! 🙂
Как разместить пункты списка горизонтально?
Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).
Пример 1. Горизонтальный список
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .
Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.
См. также
- display
- display в CSS
- Блочные элементы
- Использование в вёрстке
- Описание float
- Открываем блочную модель
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
CSS. Как поставить список в одну строку?
.complex_list ul li — Это значит «все li внутри ul, который внутри complex_list». Селектор неправильный, должен быть ul.complex_list li — «все li внутри ul с классом complex_list» и заработает.
Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list < display: flex; >:* < margin: 0; padding: 0; >.header < background-color: #169; color: white; text-align: center; height: auto; font: 1.6em arial; padding: auto; >.complex_list < background-color: #2bd; padding: 4px; >ul.complex_list < display: flex; >.complex_list li < font: 0.75em arial; list-style: none; >.complex_list li a < text-decoration: none; margin: 2px; color: #fff; >.complex_list li a:hover