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

Как выровнять меню по горизонтали css

  • автор:

Как сделать меню по центру?

Aliance

чтобы работал марджин, нужна адекватная ширина у родителя. в данном примере у блока ul ширина 1000 пикселей, хотя его реальная ширина — 550. попробуйте изменить и посмотрите на результат. кроме того нужно очистить потом (clearfix, например), чтобы размеры ul считались правильно.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

Меню центрируется, просто у Вас указана ширина в 1000px, а количество элементов списка не набирается на эту ширину и они выравниваются по левому краю и тут возникает «оптический обман» ).

1) Стилизовать .main-menu (указав, например, ему фон)
2) Выровнять элементы списка относительно родителя

.main-menu < width: 1000px; list-style: none; padding: 0; font-size: 24px; margin: 0 auto; text-align: center; >.main-menu li

3) Либо подогнать ширину .main-menu под сумму width всех элементов списка.

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
SirMustache @SirMustache

Еще можно задать
.main-menu
и перенести значение в
.main-menu li < font-size: 24px;>
чтобы убрать отступы между inline элементами.
Или отрицательный margin.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Дробит бекграунд при использовании margin?

  • 1 подписчик
  • час назад
  • 22 просмотра

Как разместить пункты списка горизонтально?

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block , оно преобразует элемент в строчно-блочный (пример 1).

Пример 1. Горизонтальный список

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul .

Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.

См. также

  • display
  • display в CSS
  • Блочные элементы
  • Использование в вёрстке
  • Описание float
  • Открываем блочную модель
  • Создание флексбоксов
  • Спойлер
  • Строчно-блочные элементы
  • Строчные элементы

Как выровнять пункты меню в одну линию, будучи выровненным по центру?

Сейчас текст выровнен по центру, но нужно, чтобы внутри пункты списка находились по одной линии. Как это принято делать?

  • Вопрос задан более трёх лет назад
  • 1387 просмотров

3 комментария

Простой 3 комментария

Hocopor

Если я правильно понял, то:

ul < display: flex;>li
ul < display: table; width: 100%; >li
ul < font-size:0; >li

Петр Сергеев @223606322 Автор вопроса

Александр Суханов, извините, я наверное неправильно выразился, вот какой результат нужен.

5c63d51895f45086869035.png

Решения вопроса 2

victory_vas

#FFFFFF @victory_vas

.list

text-align убираем
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
Петр Сергеев @223606322 Автор вопроса
больше спасибо, это то, что нужно

ws17

Можно так, хотя выше уже много вариантов написали.
https://jsfiddle.net/h07s4w1t/

А если в одну линию по вертикали, чтобы все ровно в строку было.
https://jsfiddle.net/h07s4w1t/1/

Вот еще вариант, с выравниванием в одну линию все пункты и еще выравнивание текста от значка.
https://jsfiddle.net/h07s4w1t/2/

ul,li < list-style: none; margin: 0; padding: 0; text-align: left; >a < text-decoration: none; color: inherit; >.list

Как сделать горизонтальное меню в html

Здесь создается навигационное меню с четырьмя пунктами: «Главная», «О нас», «Услуги» и «Контакты».

    свойство display: flex; :

nav ul  display: flex; list-style: none; margin: 0; padding: 0; > nav li  margin-right: 20px; > nav a  color: #000; text-decoration: none; > 

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

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