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 , оно преобразует блочный элемент в строчный (пример 1).
Пример 1. Горизонтальный список
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как разместить пункты списка горизонтально?
Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).
Пример 1. Горизонтальный список
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .
Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.
См. также
- display
- display в CSS
- Блочные элементы
- Использование в вёрстке
- Описание float
- Открываем блочную модель
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
Как расположить список горизонтально css
-
/
) элементов в линию можно применить один из ниже приведенных способов.
123 456 789 1011 1213
ul li display: inline; > -
, после чего они встанут в ряд.
ul display: flex; >