1

如何使标题覆盖内容并跨越整个页面长度？当我使用这个 css

#header {
    display: inline-block;
    background-color: #015367;
}

#login {
    color: #b92c2c;
    font-size: 1.25em;
    margin-left: 18em;
    position: relative;
    top: 16px;
    text-decoration: none;
}

#search-form {
    margin-left: 0.5em;
    margin-right: 15em;
    position: relative;
    top: 18px;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

用这个 html

<body>
    <div id="header">
        <div id="page-nav" class="rfloat">
            <a id="login" class="lfloat" href="/login">login</a>
            <form id="search-form" class="rfloat" action="search.py" method="get">
                <input id="searchbox" type="text" name="q" placeholder="search"/>
            </form>
        </div>
    </div>
</body>

我得到这个结果（在 Firefox 中） html+css 结果

我需要更改什么以获得正确的标题（如 stackoverflow、facebook 等）？

4

4 回答 4

2

既然你使用float了里面的元素#header，那么你只需要添加这个。

#header {
    background-color: #015367;
    overflow:hidden;
}

溢出前：隐藏

在此处输入图像描述

注意黑色边框，#header它没有包裹内容。

溢出后：隐藏

在此处输入图像描述

看看：http: //jsfiddle.net/AliBassam/vpRc2/

调整top使元素以您喜欢的方式定位，position:relative;这里没有用，只需使用floatsand margins。

于 2013-02-08T20:40:14.690 回答
1

将此添加到您的 CSS 以将正文的边距归零：

body {
  margin: 0;
}

见演示。

我还建议您从and中删除您的positionandtop属性，并改用它来定位它们。#login#search-formmargin

于 2013-02-08T20:35:18.680 回答
1

内联块？？

#header {
    float:left;
    width:100%;
    clear:both;
}
于 2013-02-08T20:46:20.687 回答
0

我怀疑您只是试图扩展标题框以包含登录表单。您遇到的效果是由于在标题标签中使用了浮动元素。浮动元素被从文档的正常流程中取出，这就是为什么父元素无法检测到它们实际占用空间的原因。

对此有一个简单的解决方法，只需在overflow:hidden;标题 div 的样式中添加一个。这将解决问题，但它不被认为是正确的方法。溢出并不意味着以这种方式使用。相反，我对您的建议是使用“clearfix”方法。

这是实际代码的链接：http ://www.webtoolkit.info/css-clearfix.html

您所要做的就是将此代码作为一个类添加到标题元素中。

我希望这有帮助 ：）

于 2013-02-08T20:46:05.067 回答