Цвет фона не будет отображаться за элементами списка

Question

По какой-то причине мои элементы списка не находятся внутри моего элемента UL, который нарушает ход страницы, и выглядит неправильно. Я пробовал каждый элемент позиции под солнцем, но ничего не работает. Интересно, это потому, что я создаю другой div вместо элемента UL?

Пожалуйста, посмотрите пример здесь

Предполагается, что красная граница содержит элементы списка, и если описание одного списка становится длиннее, красный фон также должен расти.

Спасибо

Answer 1

В вашем LI есть float, поэтому вы должны очистить его родителя, который UL.Напишите так:

ul{
 overflow:hidden;
}

Проверьте это http://jsfiddle.net/Uc5cr/1/

Answer 2

Попробуйте это

ol, ul
{
  overflow:auto;
}

См. Обновленную скрипку: http://jsfiddle.net/Uc5cr/8/

Answer 3

give overflow: скрыто для фона div, чтобы содержать элемент ul. Проверить

Answer 4

То, что происходит, - это то, что элементы LI плавают, и, следовательно, выходят за пределы UL. Обычно вы решаете эту проблему, очищая свои элементы LI с помощью элемента, использующего свойство clear: left; в CSS, когда вы хотите очистить плавающее.

Но так как это в неупорядоченном списке, вероятно, лучше использовать CSS-хак под названием "clearfix" на вашем UL-элементе, чтобы решить эту проблему. Таким образом, элемент UL будет следовать за элементами LI по высоте.

Пример: http://jsfiddle.net/mikaelbr/JkGRj/

Примечание. Существует множество версий хака для исправления ошибок. Выполните поиск в Google, чтобы найти некоторые из них, если вам интересно узнать, как они работают.