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/