gpt4 book ai didi

html - 当我删除溢出 : hidden property from li{} 时背景颜色消失

转载 作者:行者123 更新时间:2023-11-28 05:20:56 24 4
gpt4 key购买 nike

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

最佳答案

无论何时使用 float,请记住您必须使用 clear:both。我们使用 clear:both 的原因是 float 属性会破坏 html 元素的流动,并将根据值(左,右)推送它们,在你的情况下你使用了 float:left 意味着所有 li 将在一行中并且如果空间不被覆盖,那么它会产生空白空间问题,我们使用 clear:both 删除该空白空间,这样剩下的任何空白空间都将被使用 clear:both 覆盖。

参见 here我已经使用 div 来删除空格。

有关更多详细信息,您可以阅读 here有关详细信息,请参阅 herehere

关于html - 当我删除溢出 : hidden property from li{} 时背景颜色消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38720042/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com