Как заставить элемент 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, в котором рассматривается именно эта проблема.