Как разместить элементы списка горизонтально?
Вывести маркированный список в одну строку и убрать отображение маркеров.
Решение
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как выровнять список по центру?
nav — имеет ширина 960px
ul>li — float: left;
Как сделать так чтобы список (меню) было отцентрировано в блоке nav?
- Вопрос задан более трёх лет назад
- 61572 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 4
ul ul li
Нельзя? Или именно с float надо?
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Azim Kurt @Symphony Куратор тега CSS
Вариантов куча, вот три.
html
css
Вариант 1:
nav < width: 960px; position: relative; margin: 0 auto; >nav ul < position: absolute; left: 50%; transform: translateX(-50%); >nav li
nav < width: 960px; margin: 0 auto; >nav ul < display: table; margin: 0 auto; >nav li
nav < width: 960px; margin: 0 auto; text-align: center; >nav ul < display: inline-block; >nav li
Ответ написан более трёх лет назад
Как выровнять таблицу по центру?
Выравнивание таблицы по центру горизонтали работает только в случае, когда явно задана ширина таблицы через свойство width. При соблюдении этого условия для селектора table следует задать свойство margin со значением auto . Оно обозначает, что отступы вокруг таблицы вычисляются автоматически, это как раз и приводит к её центрированию (пример 1).
Пример 1. Использование margin
| Балбес | Бывалый |
| Трус | Шурик |
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание таблицы с помощью стилей
См. также
- height
- margin
- margin в CSS
- width
- Абсолютное позиционирование
- Блочные элементы
- Выравнивание с помощью флексбоксов
- Высота и ширина в CSS
- Колесо для сокращённых свойств
- Открываем блочную модель
- Поток
- Примеры использования float
- Размеры
- Размеры блока
- Свойство margin
- Создание флексбоксов
- Строчные элементы
- Схлопывающиеся margin
CSS Выравнивание текста
Свойство text-align используется для установки выравнивания текста по горизонтали.
Текст может быть выровнен по левому или правому краю, по центру или выровнен по ширине.
В следующем примере показаны 3 выровненных по центру и выровненных по левому и правому краю текста (выравнивание по левому краю по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):
Пример
Когда, для свойства text-align установлено выравнивание по ширине значение «justify», каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):
Пример
div <
text-align: justify;
>
Выравнивание последней строки текста
Свойство text-align-last указывает, как выровнять последнюю строку текста.
Пример
Выровнять последнюю строку текста по трем элементам
:
p.b text-align-last: center;
>
p.c text-align-last: justify;
>
Направление текста
Свойства direction и unicode-bidi можно использовать для изменения направления текста элемента:
Пример
p <
direction: rtl;
unicode-bidi: bidi-override;
>
Вертикальное выравнивание текста
Свойство vertical-align задает выравнивание элемента по вертикали.
Пример
Установите вертикальное выравнивание изображения в тексте:
img.a <
vertical-align: baseline;
>
img.b vertical-align: text-top;
>
img.c vertical-align: text-bottom;
>
img.d vertical-align: sub;
>
img.e vertical-align: super;
>
CSS Свойства выравнивания/направления текста
| Свойство | Описание |
|---|---|
| direction | Задает направление текста/направление записи |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Указывает, как выровнять последнюю строку текста |
| unicode-bidi | Используется вместе со свойством direction для установки или возврата того, следует ли переопределять текст для поддержки нескольких языков в одном документе |
| vertical-align | Задает вертикальное выравнивание элемента |
Мы только что запустили
SchoolsW3 видео
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
Schoolsw3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.