Div развал после плавания css

Question

У меня есть div, называемый NAV, и внутри NAV у меня есть UL с 5 li, который я плаваю влево, то есть li, но когда я делаю это, NAV разрушается. Я знаю это, потому что я поставил границу вокруг NAV, чтобы увидеть, разваливается ли она и происходит ли она. Вот пример.

свернуто http://img401.imageshack.us/img401/8867/collapsedze4.png

не свернуто http://img71.imageshack.us/img71/879/nocollapsedkx7.png

как вы можете видеть на первом изображении, ссылки в элементе NAV перемещаются влево, и это черная граница наверху - это фактический div, называемый NAV.

на этом изображении вы можете видеть, как он имеет верхнюю и нижнюю границу, и он не свернулся.

вот некоторые из HTML и CSS, которые я использовал.

альтернативный текст http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

Answer 1

Добавьте любое значение overflow, отличное от visible, в свой контейнер:

div#nav { overflow:auto; }

Затем добавьте width, чтобы восстановить ширину

div#nav { width: 100%; overflow:auto; }

Answer 2

Одним из решений является добавление стиля «clear: both» к элементу после последнего плавающего якоря, например:

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

Это заставляет содержащий элемент очищать все плавающие элементы перед закрытием содержащего блока.

Answer 3

Несколько других вариантов очистки поплавков здесь:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Что касается лучшего способа сделать это, это почти священная война, пуристы будут волноваться из-за дополнительного div, если вы не возражаете против небольшой дополнительной разметки, добавление очищенного div в соответствии с предложением Джошуа и AJ будет хорошо работать, и это надежный метод, но есть по крайней мере 17 других способов сделать это ...

Answer 4

добавьте этот код после вашего ul:

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

Answer 5

Ваша проблема в том, что вы перемещаете элементы <A>, но каждый из них находится внутри элемента <LI>. LI s отображаются как блоки по умолчанию, поэтому каждый <LI> заставляет своего дочернего элемента <A> начинать с новой строки.

Если вы пропустите <LI> s, я думаю, вы решите свою проблему.

#nav #ulListNavi  li  {
    float: left;
}

Answer 6

Не заморачивайтесь очисткой элементов или переполнением. Добавьте это:

#nav {
    float: left;
}

Когда вы перемещаете LI, #nav больше не «содержит» ничего, поэтому он падает. Но если #nav также перемещается, он содержит что-либо внутри него, поэтому он снова расширяется.

(Также рассмотрите возможность удаления #nav div и просто примените те же стили к UL.)

Answer 7

Попробуйте переместить содержащий элемент влево.

Answer 8

Самое быстрое решение - добавить переполнение: скрытый, чтобы очистить поплавок родительского элемента:

#nav{overflow:hidden;}

Answer 9

Без изменения вашего HTML:

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

Работает в IE8 и FF 3.5