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

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

与这个网站

<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

什么我需要改变，以得到适当的标题（如计算器，脸谱等）？

来源

2013-02-08 bab

您是否需要页眉跨越页面长度或包含登录表单？ – j08691 2013-02-08 20:34:08

两者。现在标题并没有碰到页面边缘 – bab 2013-02-08 20:50:54

由于您使用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。

来源

2013-02-08 20:40:14

没关系，所以标题包裹了内容，但是如何让它跨越整个页面长度？标题稍微靠近页面的左侧边缘，甚至没有接近右侧。 – bab 2013-02-08 20:54:57

不要使用'inline-block'，'＃header'必须包装内容，并且必须保持它的原始显示是'block'，这样，你不需要设置宽度，因为div通常需要全部宽度。更新您使用的代码，以便我可以测试。 – 2013-02-08 21:01:57

@student我真的不明白的一件事就是为什么你用'float：left;'有一个大的'margin-left'和'float：right;''''大的'margin-right'，检查一下： http://jsfiddle.net/AliBassam/GnYFv/ – 2013-02-08 21:10:00

添加到您的CSS零出保证金在身上：

body { 
    margin: 0; 
}

见DEMO。

我也建议你从#login和#search-form删除您position和top性能，并使用margin他们不是位置。

来源

2013-02-08 20:35:18 zakangelle

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

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

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

所有您需要做的就是添加以下代码为一类的头元素。

我希望这有助于:)

来源

2013-02-08 20:46:05

inline-block ??

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

来源

2013-02-08 20:46:20

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

回答

相关问题