Html H1 底部边框下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16116210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
H1 Bottom Border Underline
提问by Alex
I am having an issue where I am trying to underline my h1 with a border-bottom, but it extends behind my picture (to the left). I would like the underline to extend to the very end of the page. Here is my code:
我遇到了一个问题，我试图用边框底部为我的 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:
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;
}
Note:I am a novice coder - so if this is not possible or there are any other ways to do this let me know!
注意：我是一名新手编码员 - 所以如果这是不可能的或有任何其他方法可以做到这一点，请告诉我！
采纳答案by Cody Guldner
The reason that this is happening is because you haven't set a width on the h1. So it is naturally going to extend the entire page width. To solve this, add a widthproperty, and you should be good to go. This is what the code looks like now
发生这种情况的原因是您没有在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*/
}
As others have stated, you can also use inline-blockon the h1. This would normally put everything on the same line as the h1, but since it is a pbelow it, this is not the case, because pelements natrually have a CSS of display:block;.
正如其他人所说，您也可以inline-block在h1. 这通常会将所有内容与 放在同一行上h1，但由于它位于其p下方，因此情况并非如此，因为p元素的 CSS 自然是display:block;.
回答by Praveen Kumar Purushothaman
Do this:
做这个：
#content h1 {
font-size: 26px;
margin: 15px 0px 5px 0px;
border-bottom: 5px solid black;
display: inline-block;
}
This will only underline the contents. Not the whole line.
这只会在内容下划线。不是整条线。
