Question

如何将标题的边框底部长度设置为比文本稍长？使用此代码，它占用了所有页面长度：

<div style="position:relative;">
    <h3 style="text-align:center; border-bottom:solid;">This is a test</h3>       
</div>

我也试过这段代码：

<div style="position:relative;">    
        <h3 style="text-align:center;"><span style="border-bottom:solid;"> This is a test</span></h3>        
</div>

但是使用最后一段代码，它只需要文本的长度，我怎样才能将边框底部长度设置得比这长一点？

Answer 1

在<span>上添加左/右填充以扩展边框。

h3 span {
  padding: 0 10px; /* Increase left/right padding to extend borders */
}

＆＃13;

<h3 style="text-align:center;">
   <span style="border-bottom:solid; padding: 0 10px;"> This is a test</span>
</h3>

＆＃13;

注意 ：我不喜欢使用内联样式，因为它们被视为不良做法。我已经证明这只是为了解决您的问题。在大多数情况下，使用外部样式表是最佳选择。

Answer 2

左侧使用collect()＆amp;就在padding。请看下面的代码段：

＆＃13;

<h3>

＆＃13;

.text-holder {
  text-align: center;
}

.text {
  display: inline-block;
  padding: 0 10px;
  border-bottom: 3px solid;
}

＆＃13;

希望这有帮助！

编辑标题的边框 - 底部长度

2 个答案: