當我刪除溢出時，背景顏色消失：隱藏屬性{}

我想要一個簡單的列表佈局，當我從li {}中刪除overflow:hidden時，背景顏色簡單地消失。因爲我是CSS新手，所以我可以弄清楚爲什麼會發生這種情況。當我刪除溢出時，背景顏色消失：隱藏屬性{}

<!DOCTYPE html> 
<html> 

    <style> 
     ol { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      background-color: green; 
      overflow: hidden; 
     } 

     li { 
      float: left 
     } 

     a{ 
      display: inline-block; 
      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
     } 

     li:hover { 
      background-color: red; 
     } 


    </style> 

    <body> 
     <ol> 
      <li><a class="active" href="#home">Home</a></li> 
      <li><a href="#iPhone">iPhone</a></li> 
      <li><a href="#iPad">iPad</a></li> 
     </ol> 
    </body> 
</html>

來源

2016-08-02 Thor

它是一個'明確：both'問題。由於你使用的是float，所以'ol'不能告訴'li'的高度 – Andrew

，你需要容器具有'overflow：hidden'來覆蓋子元素，或者你可以使用clearfix tip： https://css-tricks.com/snippets/css/clear-fix/，但你也可以在'display：inline-block;'中設置你的li而不是 – shwarp

非常感謝你們的幫助！但我仍然對爲什麼會發生這樣的事情感到困惑？你能否詳細解釋一下？對不起，這樣的小白 – Thor

每當你使用浮動，請記住，你必須使用clear:both。我們使用clear的原因是：float屬性會打破html元素的流動，並會根據值（左，右）推動它們，在你使用float的情況下：left表示所有的li將在一行中，如果空間不會被覆蓋，那麼它將創建空白空間問題並刪除我們使用的空白空間清除：這樣就可以使用清除：。

請參閱here我已經使用div刪除空格。

更多的細節你可以閱讀here和詳細信息，請參閱here和here

來源

2016-08-02 12:22:05

https://jsfiddle.net/u8v8ae9c/

上貴麗標籤的float:left;導致問題。

來源

2016-08-02 12:16:49 Maharkus

所以我們應該刪除浮球？而不是解決問題？ OP是新的，我們不能說忘記浮動。 –

是的，我對這個問題的評論足夠充分，我只是提供了一個明確的答案，但顯然我錯了。 1+你的答案 – Maharkus

您已將li元素左移。取而代之，您可以使用

display：inline-block;

ol { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     background-color: green; 
    } 

    li { 
     display:inline-block; 
    } 

    a{ 
     display: inline-block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li:hover { 
     background-color: red; 
    }

FIDDLE：https://jsfiddle.net/u44Loz5z/

來源

2016-08-02 12:18:15 Abhishek

當我刪除溢出時，背景顏色消失：隱藏屬性{}

回答

相關問題