Html CSS 中每个 <h1> 标题下方的水平线/线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16073323/
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
Horizontal rule/line beneath each <h1> heading in CSS
提问by user1527613
I am trying to place a 100% horizontal line (rule) automatically beneath every instance of an
我正在尝试在每个实例下方自动放置一条 100% 的水平线（规则）
<h1>
header tag using CSS.
使用 CSS 的标头标签。
Example of what I'd like to see:
我想看到的例子：
--- snip 8< ---
--- 剪断 8< ---
Introduction
介绍
--- snip 8< ---
--- 剪断 8< ---
I have this in my CSS:
我的 CSS 中有这个：
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
And I have this in my main HTML page:
我在我的主 HTML 页面中有这个：
<body class="mypage">
<h1><span class="headline">Introduction</span></h1>
I cannot figure out how to have a horizontal line appear beneath every use of the headline class.
我无法弄清楚如何在每次使用标题类的下方显示一条水平线。
回答by PSL
You can also try using Pseudoclass :after.. I have used this kind of styling in one of my applications.
您也可以尝试使用 Pseudoclass :after。. 我在我的一个应用程序中使用了这种样式。
h1:after
{
content:' ';
display:block;
border:2px solid black;
}
You can tidy up little more to style something like this:- http://jsfiddle.net/5HQ7p/
你可以稍微整理一下来设计这样的东西：- http://jsfiddle.net/5HQ7p/
h1:after {
content:' ';
display:block;
border:2px solid #d0d0d0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
回答by Mark Parnell
h1 { border-bottom: 1px solid black }
Adjust size and colour to preference.
根据喜好调整大小和颜色。
回答by skparwal
You should use the border-bottomCSS property.
您应该使用border-bottomCSS 属性。
For HTML, use the below code:
对于 HTML，请使用以下代码：
<h1>Introduction</h1>
For CSS, use the below code:
对于 CSS，请使用以下代码：
h1
{
border-bottom:1px solid #CCC;
padding-bottom:3px;
}
In case, you want to use the float:left, float:rightproperties, then you have to use width:100%property also. padding-bottomis to optionally give some space between the text and horizontal line.
如果您想使用float:left, float:right属性，那么您也必须使用width:100%属性。padding-bottom是可选地在文本和水平线之间留出一些空间。
h1
{
border-bottom:1px solid #CCC;
float:left;
width:100%;
padding-bottom:3px;
}
Code Demo: http://jsfiddle.net/aASQe/
代码演示：http: //jsfiddle.net/aASQe/
回答by Shomz
border-bottomis what you need... and to modify the distance of the line from the text, use padding-bottom.
border-bottom是你所需要的......并修改线条与文本的距离，使用padding-bottom.
回答by Jason Lydon
Why not just use border-bottom? You can remove the span then too..
为什么不直接使用border-bottom？你也可以删除跨度..
HTML:
HTML：
<h1 class="headline">Introduction</h1>
CSS:
CSS：
h1 {
width:100%;
border-bottom: solid 1px #666;
}
回答by luxi
If you are feeling something is going wrong, you can use zoom: 1;. See this fiddle
如果您觉得出现问题，可以使用zoom: 1;. 看到这个小提琴
(I have removed spanbut you can set class to your h1 tag.)
（我已删除，span但您可以将类设置为您的 h1 标签。）
CSS
CSS
h1 {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
border-bottom: 2px solid red;
zoom: 1;
}
HTML...
HTML...
<h1>Introduction</h1>
