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

这样做：

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

这只会强调内容。不是全线。

Answer 2

你可以使用

 display: inline-block;

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

Answer 3

之所以发生这种情况，是因为您还没有在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

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

Fiddle

H1底部边框下划线

3 个答案: