h1在底部或顶部具有相等的边界

Question

我想为小部件创建标题。标题将具有相等或平行的底部边界。怎么可能？任何快速的想法。附加是我想要实现的。

第二个标题是我现在正在处理的标题。但我希望看起来像第一个结点。

希望，你明白我正在寻找与航向相等的平行边界并扩展航向的宽度。＆＃34;

谢谢大家！我得到了答案！我不打算在h1之后使用span，因为它只会增加标签，但是＆＃34; display：inline-block;＆＃34;对我来说似乎很完美。

Answer 1

将其包裹在span。

中

＆＃13;

＆＃13;

h1 span {
  text-transform: uppercase;
  padding: 20px 0;
  font-weight: 100;
  border-bottom: 1px solid black;
}

＆＃13;

<h1><span>statistics</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

jsfiddle

h1{
    font-size: 25px;
    display: inline-block;
    border-bottom: 1px solid black;
    padding-bottom: 25px;
    text-transform: uppercase;
}

Answer 3

H1 {
    display: inline-block;
    border-bottom: 1px solid #000;
    padding: 0 0 10px;
    margin: 0;
}

Answer 4

试试这个http://jsfiddle.net/e4s8qo5q/

<h1>STATISTICS</h1>

h1{
 line-height:50px;
border-bottom:1px solid;
}

Answer 5

试试这个css：

    h1{
border-bottom:3px solid black;
padding-bottom: 5px;
width:200px;
}