H1下邊框下劃線

Question

我遇到了一個問題，我試圖用邊框底線強調我的h1，但它延伸到我的圖片後面（左側）。我希望下劃線延伸到頁面的最後。這裏是我的代碼：

HTML: 
<div id="content"> 
<img src="http://imageshack.us..."/> 
    <h1>About me</h1 
     <p>Info about me....</p> 
    <h2>Contact info</h2> 
     <p>Phone:my number</p> 
     <p>Email: my email</p> 
</div> 

CSS：

#content { 
    padding: 5px 10px 5px 0px; 
    margin: 10px 10px 10px 0px; 
} 

#content img { 
    float: left; 
    margin: 0px 10px 10px 0px; 
} 

#content h1 { 
    font-size: 26px; 
    margin: 15px 0px 5px 0px; 
    border-bottom: 5px solid black; 
} 

注：我是新手編碼器 - 所以，如果這是不可能的或有任何其他方式來做到這一點讓我知道！

Answer 1

認爲出現這種情況的原因是因爲你沒有設置在h1的寬度。所以它自然會擴展整個頁面寬度。要解決此問題，請添加一個width屬性，並且您應該很好。這是代碼的樣子現在

#content h1 { 
    font-size: 26px; 
    margin: 15px 0px 5px 0px; 
    border-bottom: 5px solid black; 
    width:200px; /*Change this to whatever value that you want*/ 
} 

Fiddle

正如其他人所指出的，你也可以在h1使用inline-block。這通常會將所有內容放在與h1相同的行上，但由於它下面是p，所以情況並非如此，因爲元素天生具有display:block;的CSS。

Fiddle

Answer 2

這樣做：

#content h1 { 
    font-size: 26px; 
    margin: 15px 0px 5px 0px; 
    border-bottom: 5px solid black; 
    display: inline-block; 
} 

這隻會強調的內容。不是整條線。

Answer 3

可以使用

display: inline-block; 

http://jsfiddle.net/nrfB7/1/