центрирование пунктов меню по горизонтали

duncan

duncan

батяр з личакова
Регистрация
10 Апр 2007
Сообщения
1.599
Реакции
450
нетривиальная оказалась задача, суть которой -- чтобы пункты в горизонтальном меню были отцентрированы так, как будто они внутри ячеек таблицы
задача усложнена тем, что меню должно быть резиновое, ибо верстка резиновая

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

HTML: 
<style type="text/css">
*{ margin:0; padding:0;}
ul{ width:800px; list-style:none; text-align:center; border:1px solid #000; padding:5px;}
li{ display:inline; text-align:center; width:auto;}
</style>
 
<ul>
<li>первая</li>
<li>вторая</li>
<li>третья</li>
</ul>

получится:

409c7432451d.jpg


а надо:

06d976426f76.jpg
 
  • Заблокирован
  • #3
ну кроме как на
HTML: 
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Extalionez" />
 
    <title>Неназванный 1</title>
</head>
 
<body>
 
<style type="text/css">
*{ margin:10% 10% 10%; padding:0;}
ul{ width:800px; list-style:none; text-align:center; border:1px solid #000; padding:5px;}
li{ display:inline; text-align:center; width:auto;}
</style>
 
<ul>
<li>первая</li>
<li>вторая</li>
<li>третья</li>
</ul>
 
</body>
</html>
у меня ума не хватает. Удалите, плз, если бред.
 
значит так, должно помочь:
для UL менюшки делаете CSS такое:
{margin:auto; display:table; table-layout:fixed; border-collapse:collapse; width:100%; height:100%; list-style:none}

для LI правила такие:
{display:table-cell; text-align:center; vertical-align:middle}

тег UL ложите в DIV, размер которого можете сделать любым.
 
это в html
<ul>
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
</ul>

это в стили
ul li{
float:left;
width:33%;
text-align:center;
list-style-type:none;
}

Вот весь код, не занимайтесь извратом .)
 
Наверное, требовался универсальный код, для разного кол-ва li.
А так width:33%; придется каждый раз пересчитывать %
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху