gpt4 book ai didi

HTML float 属性不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 23:14:50 24 4
gpt4 key购买 nike

我正在尝试为我的页面创建一个标签,但我的链接没有水平显示。我使用了 float:left 来使链接水平显示。请告诉我为什么?

    <html>
<head>
<title>Test</title>
<style type="text/css">

#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}

#navbar #holder ul li a {
text-decoration:none;
float: left;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
}

</style>
</head>

<body bgcolor="SteelBlue">
<div id="navbar">
<div id="holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Mixers</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</div>

</body>
</html>

最佳答案

需要将 float left 属性应用于 Li 元素。

在您的代码中,它被应用于 Li 中的 a 元素。

这可以工作,但是如果父元素有任何高度(或者如果 overflow:hidden 应用于它),它们将堆叠在彼此之下并且子元素的起始位置将在左边,所以 float:left 不会改变他们的位置。

可能更容易将列表元素视为用于布局和定位,将 anchor 元素视为视觉外观。

#navbar #holder ul {
list-style: none;
margin: 0;
padding:0;
}

#navbar #holder ul li {
float:left;
}


#navbar #holder ul li a {
text-decoration:none;
line-height:20px;
margin-right:5px;
font-family:Calibri;
color:#000;
display:block;
}

关于HTML float 属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30991104/

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