無法更改導航欄的背景顏色

我無法更改導航欄所具有的背景顏色。我沒有使用任何框架，所以沒有衝突。下面是我曾嘗試代碼：無法更改導航欄的背景顏色

.navigation-right { 
 
    float: right; 
 
} 
 
.navigation-left { 
 
    float: left; 
 
} 
 
.navigation-main { 
 
    background-color: #000; 
 
    width: 100%; 
 
} 
 
.navigation-main li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
.navigation-main a { 
 
    color: #F2F2F2; 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <section class="navigation"> 
 
    <nav class="navigation-main"> 
 
     <ul> 
 
     <div class="navigation-right"> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
     </div> 
 

 
     <div class="navigation-left"> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
     </div> 
 
     </ul> 
 
    </nav> 
 
    </section>

來源

2015-12-13 J Sewell

注意：您的標記無效，只有'li'可以是'ul/ol'的直接孩子。 – Vucko

你缺少一個溢出：隱藏在浮動元素的父。沒有它，瀏覽器無法計算高度，因此背景顏色沒有通過。嘗試加入這一行到你的CSS：

.navigation-main{ 
    background-color: #000; 
    width: 100%; 
    overflow: hidden; // Add this 
}

來源

2015-12-13 19:20:44 Teknotica

謝謝你的幫助，你已經解決了我的問題。：D –

很高興幫助！投票將不勝感激;-) – Teknotica

@Teknotica +1，即使我知道身高是我不知道的問題，我不知道'overflow：hidden;'可以解決問題，但'overflow：hidden'可以確保子元素不超過父元素的高度;在這裏，我們沒有指定任何高度，所以瀏覽器不應該拋出一些錯誤或只是假設高度爲零？ –

只是糾正了HTML，並添加溢出：隱藏到你.navigation-main{...} JsFiddle There

Teknotica有它藏漢:)

來源

2015-12-13 19:28:02

你必須明確你的花車。使用overflow是一個鬼鬼祟祟的，但並不總是可取的方式。雖然

/* Clear */ 
 
ul::after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.navigation-right { 
 
    float: right; 
 
} 
 
.navigation-left { 
 
    float: left; 
 
} 
 
.navigation-main { 
 
    background-color: #000; 
 
    width: 100%; 
 
} 
 
.navigation-main li { 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
.navigation-main a { 
 
    color: #F2F2F2; 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <section class="navigation"> 
 
    <nav class="navigation-main"> 
 
     <ul> 
 
     <div class="navigation-right"> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
     </div> 
 

 
     <div class="navigation-left"> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
      <li><a href="">Menu</a> 
 
      </li> 
 
     </div> 
 
     </ul> 
 
    </nav> 
 
    </section>

注意，你不該分手就像你的菜單，列表內的div：最好的辦法 - - 在我看來是通過僞元素，像這樣。相反，創建兩個分開的列表。

來源

2015-12-13 19:35:20

無法更改導航欄的背景顏色

回答

相關問題