HTML CSS：流體背景顏色的div中的兩個元素

我有一個導航欄，需要顯示100％的屏幕。HTML CSS：流體背景顏色的div中的兩個元素

<body> 
    <div class="nav"> 
     <div> 
      <img src="./logo.png"> 
     </div> 
     <ul> 
      <li><a href="#" id="active">Home</a></li> 
      <li><a href="#">Browse</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
</body>

這裏是fiddle。

導航CSS有寬度：100％，左右填充10％。標誌浮起，ul漂浮在右邊。我希望img的背景顏色和導航欄的其餘部分以紅色顯示，左側導航欄的其餘部分以黑色顯示在img的右側。我可以將img的背景顏色更改爲紅色，將導航的背景顏色更改爲黑色，但我無法將顏色更改爲img的左側。

來源

2014-10-02 wernerfeuer

你能適用的CSS，也許是片段或小提琴，我們可以看到你在談論編輯你的答案？ – Jhecht 2014-10-02 02:49:57

你有一個問題是floats。與float元素從正常的文檔流中刪除，這意味着他們的父母（在這個例子中的導航div）將崩潰，失去其背景顏色。對此的一個常見解決方法是「clearfix」，更簡單的選項是浮動導航容器。您還必須對付在寬度上添加填充的框模型。

我喜歡用inline-block，而不是浮動來解決這個：

.nav { 
 
    padding-right: 10%; 
 
    background-color: black; 
 
} 
 
.nav img { 
 
    background-color: red; 
 
    width: 40px; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    padding-left: 10%; 
 
} 
 
.nav ul { 
 
    display: inline-block; 
 
    margin: 0; 
 
    vertical-align: bottom; 
 
    width: 78%; 
 
    text-align: right; 
 
} 
 
.nav li { 
 
    display: inline; 
 
    text-align: left; 
 
} 
 

 
.nav a {color:#FFF;}

<div class="nav"> 
 
    <img src="./logo.png"> 
 

 
    <ul> 
 
    <li><a href="#" id="active">Home</a> 
 

 
    </li> 
 
    <li><a href="#">Browse</a> 
 

 
    </li> 
 
    <li><a href="#">Contact</a> 
 

 
    </li> 
 
    </ul> 
 
</div>

請參閱本文的一些pros and con's of inline block。其中之一是元素之間的空白區域，這是ul寬度爲78％而不是80％的原因

來源

2014-10-02 04:27:42

謝謝，完美無缺！ – wernerfeuer 2014-10-02 06:25:13

嘗試向.nav添加overflow：hidden。

正如@JonP所解釋的，浮動的項目被取出正常流程，現在有塊格式化上下文。增加溢出，也使父母獲得上下文。

你可以閱讀一下：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

來源

2014-10-02 05:06:08 coopersita

HTML CSS：流體背景顏色的div中的兩個元素

回答

相關問題