Когда я устанавливаю фоновое изображение для UL, почему я должен устанавливать ширину и высоту, когда у дочерних элементов они уже есть? - PullRequest
Новая
       26

Когда я устанавливаю фоновое изображение для UL, почему я должен устанавливать ширину и высоту, когда у дочерних элементов они уже есть?

4 голосов
/ 25 февраля 2012

Я следую этому руководству по созданию кнопок с помощью CSS. http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

Фон для кнопок устанавливается в элементе UL. Что я заметил, так это то, что если я удаляю атрибуты высоты и ширины элемента UL, фоновое изображение исчезает, как если бы размер UL сводился к нулю. Это не имеет смысла для меня с точки зрения модели коробки. Дочерние элементы (LI) имеют заданные размеры и должны соответственно растягивать размер UL. Может кто-нибудь объяснить, что происходит? 

    ul {
    list-style-type: none;
    background-image: url(navi_bg.png);
    height: 80px;
    width: 663px;
    margin: auto;
    }

Ответы [ 3 ]

2 голосов
/ 25 февраля 2012

<li> с плавающей точкой, поэтому они удаляются из потока документов, в результате чего <ul> сворачивается.

Чтобы вести себя так, как вы ожидаете, попробуйте добавить float: left; к <ul>.

1 голос
/ 25 февраля 2012

Согласно учебному пособию, LIs являются float: left, что заставляет их больше не занимать место в родительском элементе (UL).Для решения этой проблемы вам понадобится исправление, см. Эту ветку: Какие методы «clearfix» можно использовать?

0 голосов
/ 25 февраля 2012

Хорошим исправлением, которое я всегда использую, является помещение <ul> в <div> как таковое <div id="nav"><ul>...</ul></div> и затем применение фонового изображения к элементу <div>.

Лучший ответ:

В вашем CSS добавьте display: table-row; к элементу ul и display: table-cell; к элементам li. Это лучше, чем float: left, так как он не разрушает ваш родительский элемент, и display: inline-block, поскольку он не представляет такой раздражающий разрыв между элементами.

...