Другие языки программирования и технологии

Вопрос по верстке CSS и не много html Как правильно? float:left

< div class="1" > < ul > < li > пункт< / li> <li> пункт < / li> < / ul> < / div> < div class="2" > < / div> Когда я задаю для li float:left они выравниваются в строку, но при этом div2 становится с ними то же в строку. Если я присвою div2 clear:both это валидно? Как правильно? Что бы слудющий див не выравнивался в одну строку с li
ИЦ
Игорь Царевский
5 155
вот class="1" - это не валидно. имя класса не должно начинаться с цифры (как и id), остальные предложенные варианты валидны. и clear:both; и clear: left; сработают.
display:table-cell; не работает в IE<8 и элементы, которым оно присвоено, ведут себя как ячейки таблицы. со всеми плюсами и минусами.
но вот float в этом случае не всегда удобен.
альтернатива:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>display: inline-block</title>
<style type="text/css">
body {
margin:0;
padding:0;
font:16px/1.5em Arial, Helvetica, sans-serif;
}
ul.nav {
font-size:0;
line-height:0;
margin:0 auto;
text-align:center;
padding:0;
}
ul.nav li {
display:inline-block;
padding:10px;
margin:0;
background:#09F;
border:1px solid #000;
font:16px/1.5em Arial, Helvetica, sans-serif; /* восстанавливаем размеры шрифта */
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
ul.nav li { display:inline; zoom:1; }
</style>
<![endif]-->
</head>
<body>
<ul class="nav">
<li>пункт 1</li>
<li>пункт 2</li>
</ul>
<div>text text text</div>
</body>
</html>

display: inline-block; - удобнее. для выравнивания вправо/влево/по центру пунктов меню можно пользоваться text-align для родительского блока (ul.nav) отступы и остальное для пунктов - по усмотрению - как для обычных блоков.
для IE<8 фикс - они не понимают display: inline-block;
- все проблемы с float и всяческими багами эксплореров, с ним связанными, сразу отпадают.
не понял, зачем там div class="1" - и убрал его. но если нужен - можно вернуть...
VD
Vasiliy Dmitrienko
60 969
Лучший ответ
Игорь Царевский назвал class=1 для примера. Как всегда на высоте, спасибо.
Достаточно у div2 указать clear:left
Абылайхан Болат
Абылайхан Болат
87 430
div1 display:table-cell
вышеописанная ситуация происходит имхо только в ФФ
Роман Аргунов
Роман Аргунов
34 078
вместо <div class="2">
</div> проще <div style="clear: left"></div>
а так clear:both в ослике до 8 версии не поддерживается
Сергей Николаевич
Сергей Николаевич
12 616
Vasiliy Dmitrienko clear: both; поддерживается и в IE5. есть баги до 8-ки. но именно это свойство работает. баг 6-ки. редко встречается. элемент с clear: и без hasLayout может пропадать. исправление - zoom:1;
баг 7-ки - если элементу присвоен float не совпадающий c clear по значению, то clear может не работать.

Похожие вопросы