Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.74/19: Рейтинг темы: голосов - 19, средняя оценка - 4.74
Exponat

Горизонтальное меню css чтоб блоки на всю ширину автоматически

26.03.2013, 15:52. Показов 4033. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день.

Имею горизонтальное меню посредством обычных <ul><li> описанных средствами css.
CSS
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
ul.menu {
    margin: 0;
    padding: 0;
    display: inline-block;
    background-color: #2b2b2b;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4f4f), to(#2b2b2b));
    background-image: -webkit-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -moz-linear-gradient(top, #4f4f4f, #2b2b2b);
    background-image: -ms-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: -o-linear-gradient(#4f4f4f, #2b2b2b);
    background-image: linear-gradient(#4f4f4f, #2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2b2b2b', GradientType=0); 
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    width: 100%;
}
 
ul.menu li {
    float: left;
    list-style: none;
    border-right: 1px solid #4f4f4f;
    position: relative;
}
 
ul.menu li a {
    color: white;
    display: block;
    font-family: Arial;
    font-size: 15px;
    padding: 8px 23px 10px;
    text-decoration: none;
    border-right: 1px solid #2b2b2b;
}
 
ul.menu li a:hover {
    background-color: #2b2b2b;
}
 
ul.menu li:first-child a:hover {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
}
Сама полоска содержащая меню имеет width: 100%. Но размер блоков ul.menu li a имеет фиксированную размеры padding: 8px 23px 10px;.

Проблема в том что количество блоков например 5. И они все идут с левого края к правому. Тоесть остается много пустого места с правого краю. А нельязя чтоб все блоки растягивались по ширене строки в которой размещаются? Скрин даю.
Миниатюры
Горизонтальное меню css чтоб блоки на всю ширину автоматически  
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
26.03.2013, 15:52
Ответы с готовыми решениями:

Как сделать горизонтальное меню с выпадающим списком на всю ширину страницы?
Пожалуйста, помогите нубу с его вопросом. Вот код, хочу чтобы было как на картинке. Сделал на коленке, так что не судите строго. Заранее...

Растягивающийся блоки с разными пропорциями на всю ширину
Всем привет, задача заключается в следующем: есть блок, растягивающийся на всю ширину другого блока (который в свою очередь растягивается...

Как сверстать блоки на всю ширину от центра
Прошу опытных верстальщиков помочь. Задача следующая: Нужно сверстать два блока, которые идут от центра страницы на всю ширину. С левой...

4
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
26.03.2013, 20:38
отсутствие полноценного кода, по принципу скопировал-попробовал, еще ни разу не привлекло потенциальных помощников
0
27.03.2013, 00:18

Не по теме:

newJS, не надо ругать человечка, лучше помоги, ты же можешь :)

0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
27.03.2013, 07:52
Во первых я вообще не верстальщик, и близко не похож, а верстальщик, да еще профессиональный у нас кто? не будем показывать пальцем.
Во вторых нужно само меню, какое оно у него, сколько уровней...
В третьих ненавижу черный фон, принципиально.
В четвертых мне гораздо интересней(и проще) на JS сварганить.
В пятых, нашел себе новую игрушку, называется Small Basic, все время пожирает.

Хотя сама идея растянуть меню на всю ширину всплывает периодически, то есть востребована.


Цитата Сообщение от Taatshi Посмотреть сообщение
лучше помоги, ты же можешь
А за это, спасибо.
0
10 / 10 / 1
Регистрация: 27.03.2013
Сообщений: 55
28.03.2013, 13:31
как вариант для ul.menu li добавить width: 14%;, а правую рамку для ul.menu li и ul.menu li a поменять на левую
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
28.03.2013, 13:31
Помогаю со студенческими работами здесь

Горизонтальное меню прыгает в ширину
&lt;div class=&quot;header&quot;&gt; &lt;div id=&quot;menu_itc&quot;&gt; &lt;div&gt; &lt;a href=index.html&gt; Главная &lt;/a&gt; &lt;a href=about.html&gt; О нас &lt;/a&gt; &lt;a...

Горизонтальное меню - скрыть блоки, которые не влазят на страницу
Можно ли с помощью CSS сделать, чтобы при уменьшении окна, блоки удалялись которым не хватает места в шапке?? Или можно ли как-нибудь...

Меню не на всю ширину
Доброго времени суток,проблема такая пытаюсь изменить ширину меню,но не выходит в итоге все новые пункты меню уходят на 2ю строку Все...

Горизонтальное меню css
Только начинаю делать сайты и возникла проблема, как сделать тень на горизонтальном меню, помогите пожалуйста.

Горизонтальное меню (CSS)
Приветствую! Пытаюсь создать горизонтальное меню, однако столкнулся с небольшими проблемами в связи с чем прошу Вашей...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru