如何使下划线比标题长一些像素？答案

【问题标题】：How can I make an underline some pixels longer than the headline?如何使下划线比标题长一些像素？
【发布时间】：2011-09-04 00:41:02
【问题描述】：

我目前正在尝试使用底部边框制作自定义下划线。但是，目前下划线一直延伸到我的块元素（整个页面）。

我希望它只比我的标题长 50 像素（但是文本很灵活，我不知道长度）。

我可以在不以某种方式在<h2> 中添加另一个<span> 标记的情况下执行此操作吗？我不想为每个<h2> 添加<span> 元素只是为了改变我的设计。

当前的 HTML 是：

<h1>My title</h1>

CSS：

h1 {
    font-size: 18px;
    color: #b62525;
    border-bottom: 2px solid #c68181;
}

是否可以将边框底部长度调整为我的文本长度？（例如，边框的行为类似于内联元素，但换行符、填充和边距的行为类似于块）

【问题讨论】：

标签： css

【解决方案1】：

使用display: inline-block 有效，唯一需要注意的是<h1> 标记之后的内容必须是容器元素的全宽。这里的其他解决方案也假设了这一点。您也可以使用display: inline（旧版浏览器支持），但inline-block 允许在需要时设置显式宽度。

Here's a JSFiddle

CSS

h1
{
    display: inline-block;
    padding-right: 50px;
    border-bottom: 1px dotted #888;
}

【讨论】：

【解决方案2】：

如果您无法在其他规则中对其进行补偿，则内联或浮动方法可能会出现问题。一种替代方法是使用display:table

h1
{
        display:table;
        border-bottom:1px solid black;
        padding-right:50px;
}

【讨论】：

在块元素上设置 display: table 是不是很好？至于网页设计师得出的结论是，它仅适用于表格内容，而不适用于设计。那么 display: table 呢？

请注意，display: table 不支持 IE7 and below。

【解决方案3】：

你可以使用

  h1 {
        font-size: 18px;
        color: #b62525;
        border-bottom: 2px solid #c68181;
        float: left;
        padding-right: 50px
     }

【讨论】：

【解决方案4】：

像这样在 css 中再添加一个属性：

h1 {
    display:inline;
    font-size: 18px;
    color: #b62525;
    border-bottom: 2px solid #c68181;
}

【讨论】：