CSS Горизонтальная панель навигации с цветом фона

Question

Почему этот код производит только белый фон:

ul.nav { 
    width: 30%; 
    border: 1px solid #999; 
    margin: 0px auto; 
    background-color: #00ff7f; 
} 
ul.nav li { 
    display: inline; 
    float: left; 
    width: 20%;   
} 

Answer 1

Две вещи:

1) Стартовые более в основном и дают свою высоту и ширину элементов. На этапе CSS dev вы, вероятно, находитесь, проценты будут только путать вас. Кроме того, вы должны в алфавитном порядке использовать все свойства css; он даст вам код дзен, мой друг.

2) Потерять дисплей: встроенный; ссылку и заменить его на дисплей: block ;. Display inline займет только комнату, в которой она нуждается, не более того. В вашем коде он не должен занимать какое-либо место, потому что вы только определили пробелы в процентах. Вы можете прочитать больше здесь: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Попробуйте этот код вместо:

ul.nav { 
    background-color: #00ff7f;  
    border: 1px solid #999; 
    height: 20px; /*This is an example*/ 
    margin: 0px auto; 
    width: 400px;   
} 

ul.nav li { 
    background-color: #86182d; /*Example background color*/ 
    display: block; 
    float: left; 
    height: 20px; /*This is an example*/ 
    width: 80px; /*This is 20% of 400px*/  
} 

Это, безусловно, выход что-то материальное, вы можете работать обратно от с процентами, как вы узнаете больше.

3) За каждый вопрос кто-то отвечает здесь за вас, попробуйте сами ответить. Это поможет вам узнать больше, чем вы себе представляли. Удачи в кодировании ...

Answer 2

Поскольку все дети ul.nav всплывают, то ul.nav должен удовлетвориться, чтобы придать ему высоту , Поскольку его высота равна нулю, цвет фона не отображается. Вы можете подтвердить размер ul, используя Firebug.

Answer 3

UL разрушается из-за внутренних перемещаемых элементов (li). Очистите UL с переполнением: скрытый на ul.nav.

ul.nav 
{ 
    width: 30%; 
    border: 1px solid #999; 
    margin: 0px auto; 
    background-color: #00ff7f; 
    overflow: hidden; 
} 

Answer 4

просто удалить float из ul.nav li и изменить display:inline к display:inline-block

Answer 5

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

Answer 6

Этот вопрос задавался много раз и разными способами: «Почему контейнер, инкапсулирующий мои плавающие элементы? ». Это потому, что css не является языком программирования, это стиль. CSS реагирует плавно и неявно, и многие программисты ожидают необходимости давать явные инструкции.

Я настоятельно рекомендую вам больше узнать о плавании в css. quirksmode имеет хороший page about it. Кроме того, вы должны прочитать w3c spec, чтобы получить более глубокое понимание по этому вопросу.