Как заставить элемент div сохранить содержимое внутри контейнера

Я делаю меню CSS. Для этого я использую ul. Когда я заставляю li плавать влево, тогда все li выходят за пределы ул. Я имею в виду, что высота ul станет нулевой. Как я могу сделать отображение li внутри ul после того, как оставил поплавок влево.

Один из способов сделать это - создать тег div с некоторым общим классом и добавить в него ясность: оба в css, но я этого не хочу.

Как я могу решить это?

Ответ 1

Просто добавьте overflow: auto; в <ul>. Это сделает так, чтобы текст не просачивался за пределы UL.

Смотрите: http://jsfiddle.net/6cKAG/

Однако, в зависимости от того, что вы делаете, было бы проще просто сделать <li> display: inline;. Это полностью зависит от того, что вы делаете!

Смотрите: http://jsfiddle.net/k7Wqx/

Ответ 2

Если вы определяете float вашему ребенку, тогда вам нужно очистить родителя. Напишите overflow:hidden на ваш UL.

ul{
 overflow:hidden;
}

ИЛИ Вы также можете использовать метод clearfix для этого:

ul:after{
 content:'';
 clear:both;
 display:block;
}

Прочтите этот http://css-tricks.com/snippets/css/clear-fix/

Ответ 3

Если вы хотите, чтобы переполняющий текст в div автоматически обновлялся вместо скрытия или создания полосы прокрутки, используйте

word-wrap: break-word

свойства.

Ответ 4

Это происходит, когда плавающие элементы (пункты меню) расположены внутри неплавающего контейнера (ul).

Это может быть исправлено путем плавания контейнера (редко приемлемого) или с применением clearfix, в котором рассматривается именно эта проблема.