存在CSS3背景顏色問題

基本上整個導航欄應該有一個背景顏色，但是當我運行代碼時它不會顯示出來。我希望他們能夠將導航div內的所有內容格式化爲該顏色，但不會。我對HTML5和CSS3相當陌生，所以這可能是一個愚蠢的錯誤，但我已經做了一些研究並找不到任何答案。存在CSS3背景顏色問題

#navigation { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #1d517e; 
 
    background: linear-gradient(to bottom, #003b6e, #1d517e); 
 
} 
 

 
#navigation ul { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#navigation ul.left { 
 
    float: left; 
 
} 
 

 
#navigation ul.right { 
 
    float: right; 
 
} 
 

 
#navigation ul li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 6px 10px 5px 10px; 
 
    list-style: none; 
 
    background-color: transparent; 
 
\t background-color: rgba(0, 0, 0, 0.12); 
 
} 
 

 
#navigation ul.left li { 
 
    float: left; 
 
    border-right: 1px solid black; 
 
} 
 

 
#navigation ul.right li { 
 
    float: right; 
 
    border-left: 1px solid black; 
 
}

<div id="navigation"> 
 
\t \t <ul class="left"> 
 
\t \t \t <a href="electronics/electronics.html" class="clicker"><li>Electronics</li></a> 
 
\t \t \t <a href=""><li>Gardening</li></a> 
 
\t \t \t <a href=""><li>Cooking</li></a> 
 
\t \t \t <a href=""><li>Art</li></a> 
 
\t \t </ul> 
 
\t \t <ul class="right"> 
 
\t \t \t <a href="" id="about-us"><li>About Us</li></a> 
 
\t \t </ul> 
 
    </div> 
 
\t <div class="clear"></div>

來源

2017-01-22 Nathan Renegar

Im pretty sur sur e在導航中，您使用背景屬性覆蓋背景色屬性。 –

在我看來，浮動父div是處理這種懶惰的方式。這也可能導致其他內容的不必要的重疊。 – Matthew

同意@Matthew，這不是一個好的解決方案，你會以這種方式做更多的問題。 –

基本上，因爲你浮在ul S，你必須添加float: left他們的父母，也#navigation。否則，它將只有零高度，這就是爲什麼背景不可見。

來源

2017-01-22 23:41:54 Gabriel

我假設的背景顏色，你的意思是在navigation div中定義的顏色。您的navigation div上有height: auto。您正在浮動導航鏈接，但不清除浮動或浮動父級。因爲沒有什麼要根據它進行調整，所以默認情況下它佔用0像素的高度。

要麼浮動父：

#navigation { 
    width: 100%; 
    float: left; /* or height: 30px; */ 
    background-color: #1d517e; 
    background: linear-gradient(to bottom, #003b6e, #1d517e); 
}

設置父固定高度：

#navigation { 
    width: 100%; 
    height: 30px; 
    background-color: #1d517e; 
    background: linear-gradient(to bottom, #003b6e, #1d517e); 
}

或清除漂浮（使用overflow: auto是優選的）：

#navigation { 
    width: 100%; 
    height: auto; 
    background-color: #1d517e; 
    background: linear-gradient(to bottom, #003b6e, #1d517e); 
    overflow: auto; 
}

哪你去的方法取決於你:)

希望這會有所幫助！

來源

2017-01-22 23:42:01

對於OP：浮動父項可能會導致其他內容的不必要重疊。 – Matthew

您應該清除父母，而不是其中一個孩子。 – Matthew

這是因爲您正在浮動ul。您需要清除它們。

嘗試添加此：

#navigation:after { 
    clear: both; 
    content: " "; 
    display: block; 
}

此外，ul.right需要有li第一和a內li

來源

2017-01-22 23:42:20

之所以你對#navigation DIV背景沒有顯示在導航欄是因爲兩者的兒童ul是浮動的。這使得父div沒有高度。您可以通過添加一個高度像這樣解決這個問題，以#navigation：

#navigation { 
    height: 29px; 
}

，或者你可以添加一個.clearfix類的#navigation DIV與下面的CSS：

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

和類添加到您的DIV像這樣：

<div class="clearfix" id="navigation"></div>

我很高興創造clearfix類，因爲你將能夠在您的項目everywh使用此否則你有這個問題。這也可以讓你擺脫你在底部的clear div。如果你想了解更多關於clearfix的信息，這裏是我總是提及的文章，CSS Tricks。有很多文章可以閱讀它的工作原理。

來源

2017-01-22 23:45:54 Matthew

與height:29px;更換height:auto;爲#navigation

來源

2017-01-22 23:46:30 ml92

的clearer DIV應該只是浮動的div之後放置導航條內，clear:both CSS應適用於它，現在它不

來源

2017-01-22 23:56:33 levi

添加

#navigation { 
    overflow: hidden; 
}

希望這可以幫助

來源

2017-01-26 09:51:06

存在CSS3背景顏色問題

回答

相關問題