Html H1下边框下划线

我有一个问题，我试图在我的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>

注意：我是一名编码新手-因此，如果这不可能或有任何其他方法可以做到这一点，请让我知道

这样做：

#内容h1{
字号：26px；
利润率：15px 0px 5px 0px；
边框底部：5px纯黑；
显示：内联块；
}

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

您可以使用

 display: inline-block;

---

发生这种情况的原因是您没有在

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


#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*/
}