Как разместить элементы списка горизонтально?
Вывести маркированный список в одну строку и убрать отображение маркеров.
Решение
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Список по центру
Привет, я хотел сделать список по центру. Написал список под тэгом ul. И разместил его по центру в css файле. Написав, text-align: center; Но в чем прикол, текст стал по центру, а маркеры остались слева сбоку страницы. Как это исправить?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Маркированный список с маркером по центру
Задача, нужно, чтобы маркеры всегда были по центру по вертикали, независимо от того, сколько строк.
Как выровнять список по центру шаблона
Добрый день. Возник вот такой вопрос "Как выровнять список по центру шаблона" вот код html.
Блок не стоит по центру, как сделать по центру
Всем привет, помогите нубу) Сайт получается http://1a-med.ru/ Я не как не могу сделать, чтобы.
Как выровнить резиновыь сайт по центру сайт по центру?
Здравствуйте. Как можно этот резиновый сайт выравнять по центру, чтобы при уменшении размера в.
Как выровнять список по центру?
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
Ответ написан более трёх лет назад
как выровнять теги li?
Делаю выравнивание всех трех тегов находящихся в одном Враппере, после чего не могу выровнять список, подскажите пожалуйста как сделать. спасибо
- Работаем без предоплаты
- скидки до 40%
- бесплатный выезд инженера
css вот такой
.header-content text-align: center h1 font-size: 28px line-height: 30px ul li font-size: 16px
Отслеживать
Sergey Chugun
задан 5 мая 2018 в 9:24
Sergey Chugun Sergey Chugun
1 5 5 бронзовых знаков
вам ответ тоже жипегом скинуть?
5 мая 2018 в 9:32
Покажите ваш html-код и css для этого кода.
5 мая 2018 в 10:15
Если вам дали нужный ответ, то можете отметить его как Правильный
23 мая 2018 в 7:54
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Скорее всего у вас у родительского блока стоит свойство text-align: center .
Если я правильно понял задачу то вам нужно сделать вот такую структуру html :
- Работаем без предоплаты
- Скидки до 40%
- Бесплатный выезд инженера
И задать стили обёртке в css :
.wrapper < text-align: left; >.wrapper ul
Отслеживать
ответ дан 5 мая 2018 в 11:44
1,506 5 5 серебряных знаков 18 18 бронзовых знаков
теги li по умолчанию прибиты влево, видать проблема в родительском блоке ,посмотри значени text-align
Отслеживать
ответ дан 5 мая 2018 в 14:31
soul keeper soul keeper
13 3 3 бронзовых знака
Да все верно, для родительского тега стоит text-align: center потому что мне нужно выравнять h1 и баттон, и сам список я хлчу чтобы тоже был посередине, но галочки в один ряд. Если я задаю text-align: left для ul или li, он толкает мне список к левому краю, а это не нужно
5 мая 2018 в 16:42
Если я правильно понял, то это можно сделать так:
.wrapper < text-align: center; >.wrapper ul
- Работаем без предоплаты
- Скидки до 40%
- Бесплатный выезд инженера
Отслеживать
ответ дан 7 мая 2018 в 17:26
46 4 4 бронзовых знака
Если вы хотите выровнять только галочки, а текст оставить по центру, то вам помогут flex , псевдоэлементы и абсолютное позиционирование.
.header-content < text-align: center; >h1 < font-size: 28px; line-height: 30px; >ul < list-style: none; position: relative; display: inline-flex; flex-direction: column; align-items: center; >ul li < font-size: 16px; >ul li:before
Отслеживать
ответ дан 7 мая 2018 в 18:31
5,916 1 1 золотой знак 15 15 серебряных знаков 35 35 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.