我想创建一个两端都有图像的导航栏，以使其更加纯净。
因此，我创建了下面的 HTML 和 CSS，效果非常好。我的菜单项位于 ul/li 列表中。
当我设置列表样式以将所有项目放在一行上时，末端的图像消失了。那是怎么回事？我如何解决它？
罪魁祸首是 float: left;以下。
--- 测试.html ---
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header-usernav" class="span-6 last large">
<div id="header-usernav-leftside"><div id="header-usernav-rightside">
<ul>
<li>Register</li>
<li>Signin</li>
<li>Signout</li>
</ul>
</div></div>
</div>
</div>
</body>
</html>
--- 测试.CSS ---
#container #header-usernav {
background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
height: 28px;
background-repeat: repeat;
}
#container #header-usernav-leftside {
background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
background-position: top left;
background-repeat: no-repeat;
}
#container #header-usernav-rightside {
background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
background-position: top right;
background-repeat: no-repeat;
}
#container #header-usernav ul {
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
}
#container #header-usernav li {
float: left;
padding: 0;
margin: 0 0.2em;
}
图像不同，因此可以复制粘贴 html/css 来测试它。
这是怎么回事？我究竟做错了什么？
我建议添加溢出：隐藏； （和缩放：1；以保持 IE6 的跨浏览器兼容性）到容器 div，而不是添加清除 div。 Clear 会增加源代码的臃肿程度。
#container #header-usernav ul {
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
overflow: hidden;
zoom: 1;
height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
