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

发布于 2024-08-18 04:26:43 字数 1659 浏览 14 评论 0原文

我想创建一个两端都有图像的导航栏，以使其更加纯净。

因此，我创建了下面的 HTML 和 CSS，效果非常好。我的菜单项位于 ul/li 列表中。

当我设置列表样式以将所有项目放在一行上时，末端的图像消失了。这是怎么回事？我该如何修复它？

罪魁祸首是 float: left;以下。

--- 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 来测试它。

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

原文

I want to create a navbar with images on each end to make it purty.

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?

The culprit is float: left; below.

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

The images are different so the html/css can be copied pasted to test it.

What's the deal? What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相对绾红妆 2024-08-25 04:26:43

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

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

回复收藏 0 原文

云仙小弟 2024-08-25 04:26:43

如果只有浮动的子项，您的外部容器将返回 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>

With only floated children, your outter container will return a height of 0px. As such, you can place the following immediately after the floated element(s):

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

And add the following rules:

.clear { clear:both; }

For example:

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

回复收藏 0 原文

忆梦 2024-08-25 04:26:43

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

width: 100%;
overflow: auto;

请参阅此了解说明。

It's happening because your divs have no height. You can add an empty div with clear: both immediately after your UL. Or you can add these styles to UL