H1底部边框下划线

Question

我遇到了一个问题，我试图用border-bottom来强调我的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

这样做:

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

这只会给内容加下划线。不是整行

Answer 2

发生这种情况的原因是因为您没有在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*/
}

小提琴

正如其他人所说，您也可以在h1上使用inline-block。这通常会将所有内容与h1放在同一行，但由于它是p在它下面，所以情况并非如此，因为p元素自然具有display:block;的CSS。

小提琴

Answer 3

可以使用

 display: inline-block;

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