Question

我尝试使用简单的列表布局，当我从overflow:hidden删除li {}时，背景颜色就会消失。因为我是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

每当您使用float时，请记住您必须使用clear:both。我们使用clear的原因是：两个都是float属性会破坏html元素的流量并根据值（左，右）推送它们，在你的情况下你使用了float：left表示所有的li都在一行中如果空间不会被覆盖，那么它将创建空白区域并删除我们使用的空白区域：两者都将使用 clear：both 覆盖剩余的任何空白区域。

请参阅here我使用div删除空格。

有关详细信息，请参阅here，有关详细信息，请参阅here和here

Answer 2

https://jsfiddle.net/u8v8ae9c/

你的li-tag上的float:left;导致问题。

Answer 3

您已将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/

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

3 个答案: