Резиновое горизонтальное меню на 100% ширины - HTML и CSS

Дерек · 14.02.2013, 16:49

Как меню растянуть на 100%?
Количество пунктов будет меняться, поэтому нужно сделать так, чтобы не приходилось каждый раз в CSS менять расстояние между пунктами. Отступы слева и справа должны быть всегда одинаковыми.
И должно поддерживаться IE 5.5 и IE 6. Чистый CSS.

Просмотрел кучу готовых решений, но не нашёл нужного. Поэтому прошу ссылки не давать на какие-то образцы. А конкретно что сделать в моём меню, чтобы оно растянулось. Или покажите здесь ваш рабочий вариант.

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 
<html>
<head>
   <title></title>
 
<style>
 
.navigation {
   background: green;
   padding: 0;
}
 
.navigation ul {
   margin: 0;
   padding: 0;
   list-style: none;
   overflow: hidden;
   text-align: center;
}
 
.navigation li {
   float: none;
   display: inline;
}
 
.navigation li a {
   text-decoration: none;
   color: #fff;
   display: inline-block;
   padding: 4px 25px;
}
 
.navigation li a:hover {
   color: #fff;
   background: #1b97de;
}
 
</style>
 
</head>
 
<body>
   <div class="navigation">
      <ul>
         <li><a href="">Главная</a></li>
 
         <li><a href="">Вопросы-ответы</a></li>
 
         <li><a href="">Гарантии</a></li>
 
         <li><a href="">Здесь три слова</a></li>
 
         <li><a href="">Конфиденциальность</a></li>
 
         <li><a href="">О компании</a></li>
 
         <li><a href="">Наша команда</a></li>
 
         <li><a href="">Контакты</a></li>
      </ul>
   </div>
</body>
</html>

Naive · 14.02.2013, 18:00

С justify кувыркайся, ну или таблицы, как ты любишь=)
*здесь могла бы быть ссылка на хабр с кросс-браузерным (да, да и тридент4 тоже) решением*

Дерек · 14.02.2013, 18:22

Цитата:

Сообщение от Naive

С justify кувыркайся, ну или таблицы, как ты любишь=)
*здесь могла бы быть ссылка на хабр с кросс-браузерным (да, да и тридент4 тоже) решением*

Здесь как раз таблица не очень нужна.
А знаю насчёт justify, но можно без него?

14.02.2013, 18:00	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	С justify кувыркайся, ну или таблицы, как ты любишь=) здесь могла бы быть ссылка на хабр с кросс-браузерным (да, да и тридент4 тоже) решением Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS! Гориз. резиновое меню из ul li, как его расстянуть по ширине на весь экран?	AlienNation	HTML и CSS	1	21.01.2012 01:27
Резиновое меню списком внутри DIV	Kolik317	HTML и CSS	3	05.09.2011 19:27
Горзонтальное резиновое меню, 6 элементов, зазор	Kolik317	HTML и CSS	2	15.05.2011 20:37
горизонтальное меню	s.talke.r	Паскаль, Turbo Pascal, PascalABC.NET	1	18.12.2010 17:12
Горизонтальное меню	Brutallus	Общие вопросы C/C++	3	21.11.2009 21:07

14.02.2013, 16:49	#1
Дерек Пользователь Регистрация: 08.02.2013 Сообщений: 32	Резиновое горизонтальное меню на 100% ширины Как меню растянуть на 100%? Количество пунктов будет меняться, поэтому нужно сделать так, чтобы не приходилось каждый раз в CSS менять расстояние между пунктами. Отступы слева и справа должны быть всегда одинаковыми. И должно поддерживаться IE 5.5 и IE 6. Чистый CSS. Просмотрел кучу готовых решений, но не нашёл нужного. Поэтому прошу ссылки не давать на какие-то образцы. А конкретно что сделать в моём меню, чтобы оно растянулось. Или покажите здесь ваш рабочий вариант. Код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title></title> <style> .navigation { background: green; padding: 0; } .navigation ul { margin: 0; padding: 0; list-style: none; overflow: hidden; text-align: center; } .navigation li { float: none; display: inline; } .navigation li a { text-decoration: none; color: #fff; display: inline-block; padding: 4px 25px; } .navigation li a:hover { color: #fff; background: #1b97de; } </style> </head> <body> <div class="navigation"> <ul> <li><a href="">Главная</a></li> <li><a href="">Вопросы-ответы</a></li> <li><a href="">Гарантии</a></li> <li><a href="">Здесь три слова</a></li> <li><a href="">Конфиденциальность</a></li> <li><a href="">О компании</a></li> <li><a href="">Наша команда</a></li> <li><a href="">Контакты</a></li> </ul> </div> </body> </html>