Question

我目前正在尝试使用border-bottom创建自定义下划线。但是，目前下划线一直是我的块元素（整页）。

我希望它比我的标题长50px（但文字很灵活，我不知道长度）。

我是否可以在<span>内以某种方式添加其他<h2>标记来执行此操作？我不想为每个<span>添加<h2>元素，只是为了改变我的设计。

目前的HTML是：

<h1>My title</h1>

CSS：

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

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

Answer 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;
}

Answer 2

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

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

Answer 3

您可以使用

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

Answer 4

只需在css中再添加一个属性，如下所示：

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

如何使标题下划线长于标题？

4 个答案:

CSS