Растянуть меню на всю ширину
Получается вот так На картинке видно что справа есть пустое место. Нужно чтобы все пункты меню растянулись по всей ширине меню так, чтобы между ними не было отступов. Как это сделать?
Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 16 апр 2020 в 15:45
1,677 12 12 серебряных знаков 25 25 бронзовых знаков
Его нужно растянуть внутри блока .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, тогда его стиль убирать не нужно
Как «растянуть» меню на всю ширину экрана?
Всем доброго времени суток. Нужно меню растянуть на всю ширину экрана,как можно это сделать? Знакомый сказал,что верстка кривая,и нужно враппер поменять местами с контентом. Но хотелось бы узнать по-подробнее.Так как ковырял.но ничего не получилось.
Сам сайт
Заранее благодарю за ответ.
- Вопрос задан более трёх лет назад
- 7289 просмотров
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%. элементы распределятся равномерно и без промежутков
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- WordPress
WordPress ACF, как получить в шаблоне ID самого повторителя (repeater), а также ID каждого из его полей (row) в цикле?
- 1 подписчик
- час назад
- 8 просмотров
Растянуть меню на всю ширину
Есть вообще способ растянуть пункты горизонтального меню на всю ширину доступной области (резиновая верстка)?
Предополжим, что пункты меню — это не только текст, который можно растянуть простым text-align:justify; но еще и флоатовые элементы и т.д.
Ну таблицами — это понятно и то, расстояние между ячейками разное и вид, если блоки разной длинны, довольно безобразный.
Гуглинье не дало результатов совершенно
150 сообщений
# 12 лет назад
А если поставить логический тег div и присвоить ему параметр
width=»100%»
Это я размышляю, сам туго разбираюсь еще
3460 сообщений
# 12 лет назад
Цитата («MEDALLION»):
А если поставить логический тег div и присвоить ему параметр
width=»100%»
Меню выстроится в вертикальное положение )) Не то
Просто как-то не было до этого нужды в таких менюшках. А тут раз, такой макет попался, хоть вешайся.
28 сообщений
# 12 лет назад
А чем плоха упаковка меню в список (ul) в котором положение для элементов списка (li) inline-block? и не надло плавающих приколов. Если уж совсем изврат, то в каждый элемент засунуть див и в нем уже издеваться над содержимым как в голову взбредет.
3460 сообщений
# 12 лет назад
Цитата («WordPressor»):
А чем плоха упаковка меню в список (ul) в котором положение для элементов списка (li) inline-block?
Эм, и что будет? Меню на всю ширину области не растянется, по идее.
150 сообщений
# 12 лет назад
Я гуглом редко ищу, и вот подыскал для тебя ссылочку:
Надеюсь, то что нужно !
87 сообщений
# 12 лет назад
При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так — ссылка.
Ну а если колличество пунктов известно — то можно ширину пунктов в процентах задавать.
28 сообщений
# 12 лет назад
Цитата («MrWolf»):
ссылка по аналогии с примером. получается очень классно и все растягивается
Цитата («segoddnja»): При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так — ссылка.
Ну а если колличество пунктов известно — то можно ширину пунктов в процентах задавать.
имхо, не вижу смысла в таблице. Нет совершенно никакой необходимости.
3460 сообщений
# 12 лет назад
Цитата («segoddnja»):
При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так — ссылка.
Ну а если колличество пунктов известно — то можно ширину пунктов в процентах задавать.
Я таблицами уже-то сделал, но минус таблицы в том, что растояние между пунктами меню не одинаковое. И между некоторыми пунктами настолько разное оно, что смотрится это ужасно, потому вот и ищу другой способ.
http://www.pro100design.net/html_css/delaem-prostoe-rezinovoe-gorizontalnoe-css-menyu.html
Спасибо. Способ с text-align:justify; безусловно работает. Я б его использовал бы не задумываясь ,но у меня есть кнопка со сложным фоном в этих пунктах меню и придется, скорее всего, использовать float, а с ним уже растягиваться так не будет. text-align:justify — только для строчных элементов. Но в любом случае спасибо, подумаю, может без флоата можно обойтись будет.
http://www.artlebedev.ru/tools/technogrette/html/t. по аналогии с примером. получается очень классно и все растягивается
Хм.. странное меню. Я, если честно не пойму как оно сделано. в чем его загвоздка, что оно на всю ширину растягивается.
Трюк:
меню на всю ширину блока (статья устарела, см. flex css)
Я думаю каждый веб-разработчик не раз сталкивался с необходимостью создания динамического меню на всю ширину какого-либо определенного блока. Сделаем это БЕЗ использования таблиц.
- Меню должно растягиваться на всю ширину блока;
- При добавлении новых пунктов, меню должно расширятся и при этом вписываться в ширину блока-родителя;
- Кроссбраузерность;
- Распределение ширины пунктов в меню по подобию таблиц.
- некий блок , со стилем position:relative; и шириной к примеру 600px
Шаг 1:
создадим контейнер
Шаг 2:
Обрати внимание на css, мы иммитируем таблицу
.menu { display: table; position: relative; width: 100%; height: 50px; } .menu a { display: table-cell; text-align: center; vertical-align: middle; }
Для того чтобы пункты меню не были слишком сплюснутыми ( а таблица иногда так себя и ведет ), можно дописать еще несколько слов в css:
.menu a { display: table-cell; text-align: center; vertical-align: middle; min-width: 100px; /*устанавливаем минимальную ширины ячейки*/ }
Так же легко и непринужденно блеать, можно сделать и многоуровневые меню, с любой вложенностью, для этого тег положим в , например:
.menu { position: relative; display: table; width: 100%; height: 50px; } .menu li { display: table-cell; position: relative; } .menu li a { display: block; position: relative; width: 100%; height: 100%; text-align:center; line-height: 50px; /* для того чтобы отцентрировать текст по вертикали */ } .menu li ul { display: none; position: absolute; width: 100%; margin: 0px; padding: 0px; border: 2px solid green; } .menu li ul li { display: block; } .menu li:hover ul { display: block; }
Демо результата
See the Pen BKWaYz by serge (@gaserge) on CodePen.
07 марта 2012, 19:24
Консультации платные!
Хочешь получить профессиональную помощь?
стоимость ответа на вопрос от 2 000 тыс. руб.
* На указанный email будет выставлен счет, после оплаты — ответ на вопрос
Материал оказался полезным?
У меня тут рандомная оплата обучения,
а ты желаешь взнести свой вклад?
* Сумма произвольна
Хочешь быстрее усвоить материал?
Оплати свое обучение
и по благовению вселенной у тебя все получится!
* Сумма произвольна
# Уважаемые бойцы с кодом! # Лень отвечать на комментарии.