Цвет фона для элемента ul/div не отображается

Question

Я пытаюсь отобразить элементы навигации (по горизонтали) на синей ленте. Каким-то образом свойство background-color не применяется к элементу ul. Я попытался поместить его в элемент div с фоном синего цвета. Тем не менее, это не работает

HTML фрагмент как,

<div style="background-color:blue;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Answer 1

Ты используешь float собственность для li элементы, поэтому вам нужно применить какое-то clearfix для контейнера, чтобы настроить его размер в соответствии с размером содержимого. Вы можете попробовать с overflow CSS свойство:

body > div { overflow: auto}

JSFiddle

Answer 2

Почему мой фоновый цвет не отображается, если у меня есть display: inline?

Это та же проблема, что и эта. Div выходит на высоте 0, так же, как список, так как float не занимает места.

Если вы укажете высоту или скажете им display:inline-block это сработает.

Скрипка: http://jsfiddle.net/7vp4vz6f/

Answer 3

<div style="background-color: blue; overflow: hidden;">
  <ul style="list-style-type:none;background-color:blue;">
    <li style="float:left;margin-right:10px;">cassandra</li>
    <li style="float:left;margin-right:10px;">mongodb</li>
    <li style="float:left;">couchdb</li>
  </ul>
</div>

Answer 4

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