2

我遇到了一个问题，我试图用边框底部强调我的 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;
}

注意：我是一名新手编码器 - 所以如果这不可能或有任何其他方法可以做到这一点，请告诉我！

4

3 回答 3

6

做这个：

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

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

于 2013-04-20T03:26:18.693 回答
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*/
}

小提琴

正如其他人所说，您也可以inline-block在h1. 这通常会将h1所有p内容p与display:block;.

小提琴

于 2013-04-20T04:27:11.723 回答
1

您可以使用 

 display: inline-block;

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

于 2013-04-20T03:27:44.660 回答