Html 如何使页眉覆盖整个页面长度？_Html_Css

Html 如何使页眉覆盖整个页面长度？

html css

Html 如何使页眉覆盖整个页面长度？,html,css,Html,Css,如何使页眉覆盖内容并跨越整个页面长度？当我使用这个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; } #sear

如何使页眉覆盖内容并跨越整个页面长度？当我使用这个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中）

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

将此添加到CSS中，以将正文上的边距归零：

body {
  margin: 0;
}

看

我还建议您从

#login

和

#search form

中删除您的

position

和

top

属性，并使用

margin

来定位它们。

将其添加到CSS中，以消除正文上的边距：

body {
  margin: 0;
}

看

我还建议您从

#login

和

#search form

中删除

position

和

top

属性，并使用

margin

来定位它们。

因为您对

#header

中的元素使用了

float

，那么您只需要添加这个

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

溢出前：隐藏

注意黑色边框，

#标题

没有包装内容

溢出后：隐藏

请查看：

调整

顶部

，使元素按您喜欢的方式定位，

位置：相对在这里没有用处，只需使用浮动
和边距
因为您对#标题
中的元素使用了浮动
，那么您只需要添加它
#header {
    background-color: #015367;
    overflow:hidden;
}

溢出前：隐藏

注意黑色边框，#标题
没有包装内容
溢出后：隐藏

请查看：
调整顶部
，使元素按您喜欢的方式定位，位置：相对
在这里没有任何用处，只需使用浮动
和边距
我怀疑您只是试图扩展标题框以包含登录表单。
您所体验到的效果是由于在标题标记中使用了浮动元素。浮动元素从文档的正常流中移除，这就是父元素无法检测其实际占用空间的原因
有一个简单的解决方法，只需添加一个overflow:hidden
改为header div的样式。这可以解决问题，但不被认为是正确的方法。溢流不应以这种方式使用。相反，我给你的建议是使用“clearfix”方法
以下是实际代码的链接：
您所要做的就是将此代码作为类添加到header元素中
我希望这有帮助：）我怀疑您只是想扩展标题框以包含登录表单。
您所体验到的效果是由于在标题标记中使用了浮动元素。浮动元素从文档的正常流中移除，这就是父元素无法检测其实际占用空间的原因
有一个简单的解决方法，只需添加一个overflow:hidden
改为header div的样式。这可以解决问题，但不被认为是正确的方法。溢流不应以这种方式使用。相反，我给你的建议是使用“clearfix”方法
以下是实际代码的链接：
您所要做的就是将此代码作为类添加到header元素中
我希望这有帮助：）
内联块
#header {
    float:left;
    width:100%;
    clear:both;
}

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

您需要页眉来跨越页面长度，还是包含登录表单？两者都需要。现在，页眉没有触及页面的边缘。您需要页眉跨越页面长度，还是包含登录表单？两者都需要。现在，页眉不接触页面的边缘好的，页眉包裹了内容，但我如何让它跨越整个页面长度？页眉稍微靠近页面左边缘的右侧，甚至不接近右侧。不要使用内联块
，#页眉
必须包裹内容，并且必须保持其原始显示，即块
，这样，您就不需要设置宽度，因为div通常占据所有宽度。更新你使用的代码以便我可以测试。@学生，有一件事我真的不明白，那就是你为什么使用float:left左边有一个大的边距和浮动：右边
右边有一个大的边距
，看看这个：当我去掉内联块时，背景色不显示。我知道，这就是为什么你需要添加溢出：隐藏。您还必须添加正文{margin:0；padding:0；}
好的，这样页眉会包装内容，但如何使其覆盖整个页面长度？页眉稍微靠近页面左边缘的右侧，甚至不接近右侧。不要使用内联块
，#页眉
必须包裹内容，并且必须保持其原始显示，即块
，这样，您就不需要设置宽度，因为div通常占据所有宽度。更新你使用的代码以便我可以测试。@学生，有一件事我真的不明白，那就是你为什么使用float:left左边有一个大的边距和浮动：右边
右边有一个大的边距
，看看这个：当我去掉内联块时，背景色不显示。我知道，这就是为什么你需要添加溢出：隐藏。您还必须添加正文{margin:0；padding:0；}