当我删除 overflow: hidden 属性 from li{} 时背景颜色消失

Question

我正在尝试一个简单的列表布局，当我从 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>

Answer 1

https://jsfiddle.net/u8v8ae9c/

您的 li-tags 上的 float:left; 导致了这个问题。

Answer 2

您已将 li 元素向左浮动。相反，你可以使用

显示：内联块；

 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/

Answer 3

无论何时使用浮动，请记住您必须使用 clear:both。我们使用 clear:both 的原因是 float 属性会打断 html 元素的流动并根据值（左，右）推送它们，在你的情况下你使用了 float:left 意味着所有的 li 将在一行中，如果 space 不会被覆盖，那么它将创建空白 space 问题并删除空白 space 我们使用 clear:both 所以任何剩下的空白 space 将被使用 clear:both.

覆盖

参见here我已经使用div删除空白space。

更多详情请阅读here and for detailed information see here and here

当我删除 overflow: hidden 属性 from li{} 时背景颜色消失

background color disappear when I delete overflow: hidden property from li{}

html

css

overflow

css-float