如何使頁眉覆蓋整個頁面的長度？

如何使標題覆蓋內容並跨越整個頁面長度？當我使用這個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

如何使頁眉覆蓋整個頁面的長度？

回答

相關問題