爲什麼我的標題強制水平滾動條？

考慮以下所需的佈局：爲什麼我的標題強制水平滾動條？

+--------------------------------------------------------------+ 
| +----------+             | 
| |   |             | 
| | IMAGE |      HEADER TEXT ALIGNED RIGHT | 
| |   |             | 
| +----------+             | 
+--------------------------------------------------------------+

這裏，#header div有2個孩子：圖像和文字H1。圖像需要左對齊，h1文本正確。 H1的文本應該在#header div的垂直中心：

<style> 
    #header { width: 100%; } 
    #header img { float: left; } 
    #header h1 { display: block; float: right; } 
</style> 

<div id="header"> 
    <img src="logo.gif"> 
    <h1>HEADER TEXT ALIGNED RIGHT</h1> 
</div>

然而，這讓我在瀏覽器中的水平滾動條。如果我將寬度定義爲例如500px，則水平滾動條消失。但是，這是因爲我想要一個流體佈局，我不想爲任何div定義一個固定的。

我在做什麼錯？

來源

2013-11-27 Pr0no

我不明白你提供了什麼水平滾動條：http://jsfiddle.net/2wqBA/ –

我不明白你的意思與滾動欄中輸入http：//的jsfiddle。淨/ VtLpZ / –

確保body元素的margin，padding等屬性爲0.如果要保持這些屬性，則應將#header元素的寬度設置爲auto或保留「`。這意味着，

#header{width:auto;}

來源

2013-11-27 17:18:18

爲什麼我的標題強制水平滾動條？

回答

相關問題