Question

如何制作标题涵盖内容并跨越整个页面长度？当我使用这个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 result

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

Answer 1

由于您对float中的元素使用了#header，因此您只需添加此内容。

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

溢出前：隐藏

enter image description here

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

溢出后：隐藏

enter image description here

检查出来：http://jsfiddle.net/AliBassam/vpRc2/

调整top以便按您喜欢的方式定位元素，position:relative;在此处没有用，只需使用floats和margins。

Answer 2

将此添加到您的CSS中以清除身体上的边距：

body {
  margin: 0;
}

请参阅DEMO。

我还建议您从position和top删除#login和#search-form个媒体资源，并使用margin代替它们。

Answer 3

inline-block ??

#header {
    float:left;
    width:100%;
    clear:both;
}

Answer 4

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

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

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

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

我希望这会有所帮助：）

如何使标题覆盖整个页面长度？

4 个答案: