为什么我的图像背景消失在float：left？ [英] Why do my image background disappear on float: left?
问题描述
我想在每一端创建一个带有图像的导航栏，使其变得纯净。
I want to create a navbar with images on each end to make it purty.
因此，我在下面创建了HTML和CSS，效果非常好。我的菜单项目在ul / li列表中。
So, I created the HTML and CSS below and it worked great. My menu items are in a ul/li list.
当我对列表进行风格设置时，所有项目都在一行上，两端的图像消失。这是什么？如何解决？
When I style the list to put the items all on one line, the images on the ends disappear. What's up with that? How do I fix it?
罪犯是float：left; 。
The culprit is float: left; below.
--- test.html ---
--- test.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>
--- test.CSS ---
--- test.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可以复制粘贴测试。
The images are different so the html/css can be copied pasted to test it.
什么交易？
推荐答案
我建议添加overflow：hidden; （和zoom：1;为了保持IE6的跨浏览器兼容性）到容器div，而不是添加一个清除div。 Clear为您的源代码添加了膨胀。
I'd recommend adding overflow:hidden; (and zoom: 1; to maintain cross browser compatability for IE6) to the container div rather than adding a clearing div. Clear adds bloat to your source code.
#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.
}
这篇关于为什么我的图像背景消失在float：left？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
