Как растянуть меню на всю ширину css
Для того чтобы пункты меню заняли равномерное пространство во всю ширину блока, проще всего воспользоваться flexbox , и его свойством justify-content которое равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце.
Пункт меню 1 ](https://i.ibb.co/cbDkyKt/menu.png "enter image title here") Пункт меню 2 Пункт меню 3 Пункт меню 4
ul /* Добавим фоновый цвет для нашего меню */ background: #33CCFF; /* Выставим высоту */ height: 100px; /* Уберем точки у li элементов */ list-style-type: none; /* добавим отступ, чтобы крайние значения меню не были прижаты в плотную к границам меню */ padding: 10px; /* Используем flexbox */ display: flex; justify-content: space-between; /* Дополнительно сделаем вертикальное выравнивание */ align-items: center; > 
Результат
Растянуть меню на всю ширину
Получается вот так На картинке видно что справа есть пустое место. Нужно чтобы все пункты меню растянулись по всей ширине меню так, чтобы между ними не было отступов. Как это сделать?
Отслеживать
22.4k 11 11 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков
задан 16 апр 2020 в 15:45
1,669 12 12 серебряных знаков 27 27 бронзовых знаков
Его нужно растянуть внутри блока .main_nav. Тут max-width другого блока не причем.
16 апр 2020 в 15:54
codepen.io/topicstarter/pen/MWayKyP — с font-size надо поработать
16 апр 2020 в 15:58
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Должного эффекта можно добиться с помощью свойства justify-content.
Для начала отмечу, что в данных стилях, которые ранее использовались для центрирования списка вкладок, надобности больше нет:
.main_row
В принципе сам блок .main_row можно убрать, но тут уже на ваше усмотрение, может быть он вам нужен.
Теперь к сути. Я бы прибег к следующему варианту: justify-content: stretch для родителя ( ul ) и flex-grow: 1 для потомков ( li ).
Ваш пример с соответствующими изменениями:
.main_nav_wrapp < background-color: #004a9e; >.main_row < /* это больше не нужно */ /* max-width: 1240px; */ /* margin: 0 auto; */ >.main_nav < justify-content: stretch; // и раз display: flex; display: -webkit-flex; outline: 1px solid red; >.main_nav li < display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; text-align: center; flex-grow: 1; // и двас >.main_nav li a
flex-grow: 1 необходим для правильной работы stretch и является своего рода множителем определяющим насколько элемент больше своих соседей (попробуйте поставить flex-grow: 10 только первому li, посмотрите, что выйдет).
Также замечу, что отступ слева создаёт ul, у него по дефолту есть padding
UPD: Немного невнимательно прочитал, если вам нужно, чтобы элементы меню растянулись не по всей странице, а только внутри блока .main_row, тогда его стиль убирать не нужно
Как растянуть пункты меню на всю ширину занимаемого контейнера, при этом первый и последний пункты должны вплотную прилегать к краям родителя?
Дизайнер настаивает что пункты главного меню должны быть прижаты к краям родительского контейнера, схематично выглядит так joxi.ru/8AnXwebhjg71Lm . Количество пунктов естественно может меняться. Более того длинна ссылки разная, ведь где-то это слово «Главная» а где-то «Наши партнёры» или «Бизнес-центр», так что вариант посчитать ширину блока, поделить на количество пунктов, а полученную ширину присвоить пунктам меню — не прокатил. Во первых длинные пункты начинают переноситься на вторую строку, во-вторых там всё же адаптив а с жёстко прописанной шириной как-то не очень адаптируется да и пересчитывать).
Одним из вариантов думал сделать так, выравнивание в ссылках по левому краю, у всех padding: 32px 35px; , но у первого пункта padding-left: 0px; а у последнего padding-right: 0px; но загвоздка в том что последний пункт не «дотягивает» до правого края родительского блока.
Пример https://codepen.io/maler1988/pen/QgLYVz их можно как-то рястянуть, чтобы потом удобно было всё это адаптировать до 768px; (на меньших разрешениях меню будет преобразовано в мобильное) ?
- Вопрос задан более трёх лет назад
- 612 просмотров
2 комментария
Оценить 2 комментария
Как «растянуть» меню на всю ширину экрана?
Всем доброго времени суток. Нужно меню растянуть на всю ширину экрана,как можно это сделать? Знакомый сказал,что верстка кривая,и нужно враппер поменять местами с контентом. Но хотелось бы узнать по-подробнее.Так как ковырял.но ничего не получилось.
Сам сайт
Заранее благодарю за ответ.
- Вопрос задан более трёх лет назад
- 7367 просмотров
3 комментария
Оценить 3 комментария
Ingernirated @Ingernirated
width:100% не вариант?
First Name @maxxtweek Автор вопроса
Ingernirated: нет,так как бутстрап,контейнер блокирует.Верней растягивается на ширину контейнера
Ingernirated @Ingernirated
Максим Теплов: Сделайте исключение для одного блока и создайте его отдельно со своим классом
, вместо бутстрапа.Бутстрап хорош, но не универсален.
Решения вопроса 1
Ярослав Иванов @space2pacman Куратор тега CSS
Просто царь.
Как вариант можете добавить в свой файл css это
#navigation
а в layout.css на 75 строке поменять это
@media only screen and (min-width: 768px) < ul.nav li < padding-left: 3%; >>@media only screen and (min-width: 768px) < ul.nav li < padding-left: 50px; >>Хотя это не совсем валидно. Лучше с враппером разобраться. С другой стороны смотрится нормально и ничего не едет.
Добавил скриншот.
Ответ написан более трёх лет назад
Нравится 1 7 комментариев
First Name @maxxtweek Автор вопроса
А что с ним сделать можно?:С
я никак не допру
Ярослав Иванов @space2pacman Куратор тега CSS
Если это сложно то сделай как у меня в ответе и посмотри как работает. Если все устраивает то ок.
First Name @maxxtweek Автор вопроса
да,сделал.
Только одно НО.
На «главной» странице(моя самописная) криво становится)
tiarsekj.bget.ru
Ярослав Иванов @space2pacman Куратор тега CSS
тогда вместо padding-right: 99px добавь width: calc(100% — (-99px)); Код в ответе поправил
First Name @maxxtweek Автор вопроса
Благодарю.
Очень помог,спасибо)
First Name @maxxtweek Автор вопроса
Пля,что-то накосячил. На самописной странице все норм,а в магазине самом #navigation растянулось и горизонтальная полоска прокрутки появилась.
Если убрать строчку «width: calc(100% — (-99px));» то встает все нормально в магазине,а на самописной нет :С
First Name @maxxtweek Автор вопроса
UPD
Моя оплошность,пэддинг не чайно задал 😀
Ответы на вопрос 2
Изучаю фреймворк laravel
Он у тебя походу находиться в container или wrapper смотря как ты назвал. Тебе надо вывести меню оттуда и дать width 100% скинь код сайта я тебе точно скажу тогда
Ответ написан более трёх лет назад
First Name @maxxtweek Автор вопроса
сайт же есть
ArtViolence @ArtViolence
.main-nav display: table position: relative width: 100% height: 60px a color: #000 display: table-cell text-align: center vertical-align: middle min-width: 120px text-decoration: none border-left: 1px solid lighten($accent, 5%) transition: background-color 1s easy &:last-child border-right: 1px solid lighten($accent, 5%) &:hover background-color: lighten($accent, 5%) text-decoration: none transition: background 1s easyменю будет на всю ширину контейнера, тебе надо сделать его width: 100%. элементы распределятся равномерно и без промежутков
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +2 ещё
Почему не работает z-index для swiper-слайдера?
- 1 подписчик
- 31 минуту назад
- 6 просмотров