我正在尝试为我的页面创建一个标签，但我的链接没有水平显示。我使用了 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/