调整标题元素的底部边框以适合文本宽度并且也是响应

Question

我想使底部边框更窄并且响应快，同时保持文本居中。我怎么能做到这一点？我试着明确使用宽度属性，但显然不工作。

DEMO：https://www.bootply.com/jEB0e4Ao61

h1 { 
 
    border-bottom: 1px solid orange; 
 
    padding-bottom: 5px; 
 
    width: 400px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div>

Answer 1

你需要做两件事情：

1. 使用display:inline-block;
2. 设置从一个块元件width: auto

变化这样的边界将调整大小以文本的宽度：

<h1>是block元件，其将自动拉伸至100％的宽度容器。将宽度设置为自动或者将百分比应用于默认宽度，即50％将是容器宽度的50％。

使用inline-block和宽度为auto将使标题只与标题本身一样宽，这意味着您不需要针对不同屏幕尺寸的媒体查询。这将使边框成为标题本身的确切宽度。

为了使“下划线”扩展比文本的宽度宽：

如果您想在标题两侧多余的空间，可以使用填充做到这一点。例如：

padding-left:20px; padding-right:20px; 

将在标题的任一侧添加20px，扩展元素的宽度，这也将在两侧扩展底部边框20px。

工作演示：

h1 { 
 
    border-bottom: 1px solid orange; 
 
    display: inline-block; 
 
    width: auto; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 0 20px 5px; /* this adds 20px to the sides, extending the border */ 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div> 
 
<p>The "underline" for this heading extends 20px either side of the text by setting the left and width padding to 20px</p>

Answer 2

您可以使用display: inline-block和中心作品。

观看演示下面当我设置width为400像素（可以使用媒体查询调整width响应能力）：

h1 { 
 
    border-bottom: 1px solid orange; 
 
    padding-bottom: 5px; 
 
    display: inline-block; 
 
    width: 400px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div>