gpt4 book ai didi

html - 为什么我的图像背景在 float : left? 上消失

转载 作者:太空狗 更新时间:2023-10-29 14:44:31 24 4
gpt4 key购买 nike

我想创建一个导航栏,两端都有图像,让它看起来很漂亮。

因此,我创建了下面的 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来测试。

这是怎么回事?我做错了什么?

最佳答案

我建议添加 overflow:hidden; (和缩放:1;保持 IE6 的跨浏览器兼容性)到容器 div 而不是添加清除 div。清除会使您的源代码膨胀。

#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.
}

关于html - 为什么我的图像背景在 float : left? 上消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2062134/

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