Как растянуть меню на всю ширину 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; > Результат
Как растянуть контейнер на всю ширину css
Есть несколько способов как сделать так, чтобы нужный блок занимал всю ширину видимой части браузера( viewport ), или родительского блока. Если необходимо чтобы элемент занял всю ширину родительского элемента (который в свою очередь может быть задан в px или rem), то нужно просто указать:
.example width: 100%; > Если необходимо что бы элемент занимал всю ширину видимой части браузера, то необходимо выставить:
.example width: 100vw; /* И по аналогии с высотой, если требуется */ height: 100vh; > Растянуть содержимое блоков на всю его ширину
Ниже описан код самого блока, подскажите пожалуйста, как и что в нем отвечает за длину разделов блока, как сделать чтобы эти 3 блока (главная, ваш бюджет и contact) растягивались на всю его длину?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
#cssmenu { border: none; border: 0; margin: 0; padding: 0; font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; width: auto } #cssmenu ul { background: #1F4F9F; height: 35px; list-style: none; margin: 0; padding: 0 } #cssmenu li { float: left; padding: 0 } #cssmenu li a { background: #1F4F9F url('http://1.bp.blogspot.com/-1S2oIysWRSg/UjqX6uaD7aI/AAAAAAAABdw/uxzHTm7pPvM/s1600/seperator.gif') bottom right no-repeat; display: block; font-weight: normal; line-height: 35px; margin: 0; padding: 0 25px; text-align: center; text-decoration: none } #cssmenu > ul > li > a { color: #FFF } #cssmenu ul ul a { color: #ccc } #cssmenu li > a:hover, #cssmenu ul li:hover > a { background: #2580a2 url('http://1.bp.blogspot.com/-LfD4k3S234Q/UjqY7yGGUrI/AAAAAAAABeA/z3odDyDzM6Q/s1600/hover.png') bottom center no-repeat; color: #000; text-decoration: none } #cssmenu li ul { background: #1F4F9F; display: none; height: auto; padding: 0; margin: 0; border: 0; position: absolute; width: 225px; z-index: 200; /*top:1em;/*left:0;*/ } #cssmenu li:hover ul { display: block } #cssmenu li li { background: url('http://1.bp.blogspot.com/-utz_9dooZAA/UjqYpnWFcDI/AAAAAAAABd4/J5uVl-8hpfM/s1600/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0; padding: 0; width: 225px } #cssmenu li:hover li a { background: none } #cssmenu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0; padding: 0 10px 0 15px; text-align: left } #cssmenu li ul a:hover, #cssmenu li ul li:hover > a { background: #2580a2 url('http://3.bp.blogspot.com/-GHcVUbDqaCs/UjqZZY7jHWI/AAAAAAAABeI/dTI0HyyzA7Q/s1600/hover_sub.png') center left no-repeat; border: 0; color: #fff; text-decoration: none } #cssmenu p { clear: left }
a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus">img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" />/a>a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu">img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" />/a>a href="http://clickrub.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu">img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" />/a>
Растянуть div на всю свободную (максимальную) ширину
Есть два блока. Первый блок имеет динамическую ширину, т.е. ширина зависит от содержимого. Второй блок должен быть растянут на всю остальную (свободную) ширину.
.parent < border: 2px solid red; height: 30px; line-height: 26px; >.child
Содержимое Второе содержимое Как можно с помощью CSS растянуть второй блок на всю свободную ширину?
Отслеживать
задан 6 июл 2017 в 9:03
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
Возможный дубликат вопроса: Вычисление ширины input
18 апр 2018 в 21:47
18 апр 2018 в 21:48
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Знаю два хороших метода, как растянуть второй блок на всю свободную (максимальную) ширину:
-
Современный метод ― с помощью flexbox.
.parent < display: flex; border: 2px solid red; height: 30px; line-height: 26px; >.child < display: block; border: 2px solid blue; >/* Растягиваем второй блок на максимальнуцю ширину */ .child.max
Содержимое Второе содержимое .parent < border: 2px solid red; line-height: 26px; overflow: auto; /* Это чтобы родитель не терял высоту */ >.child < display: block; float: left; border: 2px solid blue; >/* Растягиваем второй блок на максимальнуцю ширину */ .child.max
Содержимое Второе содержимое Уточнение: overflow должен быть единственным в родителе и находится после всех float.
Отслеживать
ответ дан 6 июл 2017 в 9:03
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
если будет длинная строка — блок не растянется в высоту
6 июл 2017 в 9:06
@Grundy, какой блок?
6 июл 2017 в 9:07
Любой. Во втором примере вообще все печально становится
6 июл 2017 в 9:07
@Grundy, вопрос был про ширину. Полную высоту делать не обязательно.
6 июл 2017 в 9:08
- html
- css
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.