gpt4 book ai didi

html-lists -
    这段代码中的高度为 0,为什么? (它与溢出 :hidden) 有关

转载 作者:行者123 更新时间:2023-12-04 03:01:29 25 4
gpt4 key购买 nike

请引用以下代码:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
border: 1px solid red;
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/ /* Remove this comments */
background: yellow;
}

li {
border: 1px solid red;
float: left;
}

li a {
display: block; /* what is this used for here? */
color: black;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color:red;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>


我想知道为什么列表高度为零,即使其中有列表元素?

如果您在 发表评论溢出:隐藏 在 css 中,列表将获得除零以外的适当高度。你能说出原因吗?

最佳答案

您的高度 ul为零,因为您正在 float 子元素,这实质上是将它们从包含列表的布局中删除。

如果您还 float 您的 ul ,您会看到它包含您的 child li元素和高度大小本身,因为我相信你正在寻找它。

关于如何 float 有一些进一步的背景信息影响页面流量 here ,如果你好奇的话。

关于html-lists - <ul> 这段代码中的高度为 0,为什么? (它与溢出 :hidden) 有关,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48843680/

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