несколько горизонтальных списков по центру
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>horizontal menu</title>
<style type="text/css">
<!--
.main_menu li {
float: left;
list-style: none;
text-align: center;
background: brown;
}
.main_menu li a {
width: 100px;
display: block;
font-size: 12px;
color: #fff;
text-decoration: none;
}
.main_menu li a:hover {
background-color: burlywood;
}
-->
</style>
</head>
<body>
<ul class="main_menu">
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
<li><a href="#">item #6</a></li>
</ul>
<ul class="main_menu">
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
<li><a href="#">item #6</a></li>
</ul>
</body>
</html>
работает замечательно но для одного списка , второй уже становится не на новой строке 8( как это бороть? Кста непонятно почему свойство воздействует на родительский элемент . |
|
Код:
.main_menu { |
Замечу лишь, что Kolyaj предлагает абсолютно работающее решение, но есть кое-что, на что следует обратить внимание. При overflow:hidden браузер вынужден увеличить высоту объекта до самого нижнего флоата, однако не забывайте, что это все-таки overflow:hidden, иначе Вы можете сильно удивиться, куда это делся кусок элемента position:absolute внутри.
Если высоту ul увеличивать особо-то и не нужно, ограничьтесь clear: both, сэкономите немного нервов :). |
спасибо. нервы сэкономили таблицы 8 )...надо буит заменить.
а почему свойство float передаётся за пределы блока? Зачем использовать overflow: hidden; не по назначению? |
В флоаты выпадают из основного потока. Соответсвенно, в нормальных браузерах блок-контейнер, если внутри него нет не-флоатов, занимает по высоте 0. Второй элемент располагается сразу после после первого, а его элементы присоседиваются к флоатам первого.
|
Понял, что ничего не объяснил. Короче, флоаты выпадают из основного потока и имеют особенности.
|
8 )) пасип, успешно пользую "clear: both"
ну нееее....они меняют его!!!! 8))) |
| Часовой пояс GMT +3, время: 06:00. |