如何解决HTML,CSS-<li>元素不浮动
| 我正在尝试获取此div中的所有<li>
元素:
<div id=\"nav_bar\">
<ul>
<li><a href=\"#1\">Nav Item</a></li>
<li><a href=\"#2\">Nav Item</a></li>
<li><a href=\"#3\">Nav Item</a></li>
<li><a href=\"#4\">Nav Item</a></li>
<li><a href=\"#5\">Nav Item</a></li>
<li><a href=\"#6\">Nav Item</a></li>
</ul>
</div>
一路走来。
对于这些元素,我具有以下CSS样式:
div#nav_bar
{
width: 25px;
background-color: #CCC;
}
div#nav_bar li
{
list-style: none;
padding: 10px;
height: 20px;
margin-right: 0px;
float: left;
width: 100px;
background-color: #CCC;
}
但是它们彼此在下面。
解决方法
那是因为您将div#nav_bar的宽度设置为25px,因此li'是浮动的,但由于宽度太小而溢出到下一行。
将宽度设置为更大的值或删除该属性。
检查此:http://jsfiddle.net/d4S2u/
, 那是一个水平列表,并且有很多示例。
最简单的方法是在发布的代码中使用
display: inline
而不是float: left
, 这会导致您以25px的宽度限制6个标记,因为未指定oveflow,所以它们到达另一行。删除div#nav_bar的宽度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。