Как сделать список в линию css
Перейти к содержимому

Как сделать список в линию css

  • автор:

Горизонтальный список в 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; /* Отображать как строчный элемент */ >

Ну вот, в принципе, и всё. Горизонтальный список готов! 🙂

Как расположить список горизонтально css

    /
    ) элементов в линию можно применить один из ниже приведенных способов.

  123 456 789 1011 1213  
ul li  display: inline; > 

    , после чего они встанут в ряд.

ul  display: flex; > 

Адаптивный список ссылок в одну строку

Меню состоит из нескольких пунктов. Самый первый и самый большой ведёт на страницу рубрики. Остальные — на страницы подрубрик. Под меню можно разместить список с последними статьями из рубрики.

На Главной странице может быть несколько таких меню.

Когда подрубрики не помещаются в одну строку, то они поочерёдно переходят на следующую

 .raz < margin: 1em 0; word-spacing: 1em; >.raz a < text-decoration: none; >.raz a:first-child 
Красота Волосы Лицо Макияж Тело Косметология Диеты Фитнес

Когда подрубрики не помещаются в одну строку, то они все переходят на следующую

 .raz a < text-decoration: none; vertical-align: middle; >.raz > a < display: inline-block; padding: .5em 0; font-size: 2em; >.raz span 
Красота Волосы Лицо Макияж Тело Косметология Диеты Фитнес
  
КрасотаВолосыЛицоМакияжТелоКосметологияДиетыФитнес

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

Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.

    и
    . Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

Для начала создадим обычный маркированный список, содержащий пункты нашего меню:

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором «menu» .

По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:

Как видно элементы списка выстроились вертикально друг под другом и если нам нужно вертикальное меню, то если стилизовать нужным образом ссылки (добавить фоновый цвет, рамки, отступы, изменить шрифт) можно получить привлекательную навигационную панель.

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block . Я буду использовать правило display:inline-block . Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт li, уберем подчеркивание ссылок, настроим отступы и др.:

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

Горизонтальное меню по центру

Выравнять меню по центру можно так:

Горизонтальное меню с пунктами одинаковой ширины

Чтобы сделать все пункты меню одинакового размера указываем для них нужный размер. Только главное чтобы в сумме размеры пунктов не превышали размер всей панели. Можно сделать так:

Если добавить немного трансформации:

то получим меню со скошенными углами:

На этом все, пробуйте и предлагайте свои варианты в комментариях. Ссылка на исходный файл с примерами. До новых встреч!

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

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