为什么我的图像背景在浮点上消失：左？

StackOverflow https://stackoverflow.com/questions/2062134

题

我想创建一个带有图像的Navbar，以使其纯化。

因此，我在下面创建了HTML和CSS，并且效果很好。我的菜单项在UL/LI列表中。

当我为将项目全部放在一行上时，列表时，末端的图像就会消失。那是怎么回事？我如何解决它？

罪魁祸首是浮动：左；以下。

--- 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 ---

#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复制粘贴以测试它。

这是怎么回事？我究竟做错了什么？

有帮助吗？

解决方案

我建议添加溢出：隐藏； （和Zoom：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.
}

其他提示

只有浮子的孩子，您的围墙容器将返回0px的高度。因此，您可以在浮动元素之后立即放置以下内容：

<div class="clear"></div>

并添加以下规则：

.clear { clear:both; }

例如：

<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 class="clear"></div>
          </div>
        </div>
    </div>
</div>

之所以发生，是因为您的DIV没有高度。您可以添加一个空的div clear: both 在您的UL之后立即。或者您可以将这些样式添加到UL

width: 100%;
overflow: auto;

看 这个 用于解释。

添加一个 height: 28px; 给你 ul 在您的CSS中。乔纳森（Jonathan）和切坦（Chetan）已经很好地解释了为什么这起作用，但是要重申，浮动元素的父母不受浮动孩子的高处的影响。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top