Вчера я увидел сообщение от goos, использующего ucweb: Кто сказал, что меню Float нельзя центрировать по горизонтали ? Я зашел и посмотрел, и обнаружил, что метод немного громоздкий, с использованием отрицательных полей, позиции: относительного и некоторых других; хаки.
У меня есть более простой способ, который я покажу сначала:
На самом деле мне следовало поставить еще один диван снаружи, но, чтобы сократить выбросы углекислого газа, я отказался от него.
Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {семейство шрифтов: Verdana, Arial, без засечек; размер шрифта: 12 пикселей; поле: 120 пикселей авто; выравнивание текста: центр;}
ul {маржа: 0; дополнение: 0; стиль списка: нет;}
#navigation{display:inline-block;border:solid 1px красный;padding:20px;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
</стиль>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;</style><![endif]-->
<title>Плавающее меню — один из способов выиграть</title>
</голова>
<тело>
<ul id="навигация">
<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>
</тело>
</html>
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
Наиболее важной является эта фраза:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;</style><![endif]-->
Чтобы позаботиться о более низких версиях IE, здесь используются условные комментарии. Похоже, что в IE7 и ниже функция display:inline; эквивалентна inline-block;.
Навигация по раздвижной двери возникла из приведенного выше кода:
Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
тело {семейство шрифтов: Verdana, Arial, без засечек; размер шрифта: 12 пикселей; поле: 120 пикселей авто; выравнивание текста: центр;}
ul {маржа: 0; дополнение: 0; стиль списка: нет;}
#navigation{display:inline-block;padding:20px;border:solid 1px красный;}
#navigation li{height:30px;float:left;}
#navigation li a{float:left;background:#97C099 url( ) right -352px без повторения;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hover span,#navigation li.current a span{background-position:right -528px;}
#navigation li.current a {font-weight:bold;}
</стиль>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;</style><![endif]-->
<title>Обновите стиль раздвижной двери в соответствии с приведенным выше кодом</title>
</голова>
<тело>
<ul id="навигация">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Новости</span></a></li>
<li class="current"><a href="#"><span>Магазин</span></a></li>
<li><a href="#"><span>Группа</span></a></li>
<li><a href="#"><span>Сообщество</span></a></li>
<li><a href="#"><span>Справка</span></a></li>
</ul>
</тело>
</html>
[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]
Среди них эти два предложения необходимо объяснить, чтобы их не считали излишними:
#navigation li a{overflow:hidden;} /* Скрыть 3 пикселя, удаленные в IE5.5 и 6. Это не ошибка 3 пикселей! Поскольку height:30px;line-height:33px в IE5.5 и 6, высота равна 33px; */
#navigation li a span{cursor:hand;}/* Устраните ошибку в IE 5.5, 6 и 7, из-за которой мышь не отображала форму руки при помещении на пролет. Кроме того, IE5.5 не поддерживает курсор:указатель, но все версии IE распознают курсор:рука;*/;
Готово. Недостаток в том, что написание этой строки условных комментариев - это как песок в глаза людям с xhtml-мизофобией. Если вы хотите от этого избавиться, то использовать хак не помешает! хе-хе!
Никаких проблем не обнаружено в Safari4, Chrome, Opera10, ie5.5, 5, 6, 7, ff3.