当我删除溢出时，背景颜色消失：隐藏属性{}

我想要一个简单的列表布局，当我从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

当我删除溢出时，背景颜色消失：隐藏属性{}

回答

相关问题