Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Горизонтальный ul

Автор: Kremnik 16.4.2009, 17:34

Самый распространённый способ создания горизонтального списка - вставить список во float: left, но при этом появляется глюк в IE, т.к. весь список вылезает из флоатнутого блока. Есть какой либо другой способ создания горизонтального списка или устранения этого глюка в IE?

Автор: bars80080 16.4.2009, 17:47

это вобще-то не глюк, а стандарт и проявляется он во всех браузерах

для того чтобы блок закрепить, надо по окончанию всех плавающих блоков вставить

Код


<div style="clear: both;"></div>

Автор: Kremnik 16.4.2009, 17:50

Цитата(bars80080 @ 16.4.2009, 17:47)

Код


<div style="clear: both;"></div>

Так таким образом блок уедет вниз, пока не закончатся флоатнутые блоки. А у меня блок вверху страницы.

Автор: bars80080 16.4.2009, 18:06

приводите код

Автор: Kremnik 16.4.2009, 18:18

Грубо это выглядит так:

Код


<div id="top_menu">
<ul>
<li>link_1</li>
<li>link_2</li>
<li>link_3</li>
</ul>
</div>
<div id="left_block">
1234567890
</div>

Код


div#top_menu {
    border: 2px solid #000000;
    overflow: hidden;
}
div#top_menu ul {
    list-style-type: none;
}
div#top_menu ul li {
    float: left;
    margin-left: 7%;
    padding-right: 10px;
}
div#left_block {
float: left;
}

Автор: ksnk 16.4.2009, 18:34

решений много, вставить <div style="clear:both;"></div> послу ul'а, или

Код


div#top_menu {
    border: 2px solid #000000;
    overflow: hidden;
    float:left;width:100%; /* добавка */
}

Автор: Kremnik 16.4.2009, 18:40

Ок, спасибо большое, приём с флоатом и расширением прошёл успешно.
А могли бы вы объяснить, из-за чего такое происходит? Вроде по правилам вёрстки всё сделано правильно.

Автор: ksnk 16.4.2009, 19:26

Вот http://habrahabr.ru/blogs/css/48383/ про потоки и float'ы, в частности...

Добавлено через 1 минуту и 42 секунды
http://habrahabr.ru/blogs/css/48429/ smile

Добавлено через 3 минуты и 13 секунд
опять не совсем оно... Где-то там была и статья про float:left + width:100% :-( Не нашел, пока...