我想让底部边框更窄并且响应灵敏，同时保持文本居中。我怎样才能做到这一点？我尝试显式使用 width 属性，但这显然不起作用。
DEMO: https://www.bootply.com/jEB0e4Ao61 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>
你需要做两件事：
- use
display:inline-block;
- set
width: auto
从块元素更改为边框将调整为文本的宽度：
<h1> is a block元素，它将自动拉伸到容器宽度的 100%。将宽度设置为自动或百分比将应用于默认宽度，即 50% 将是容器宽度的 50%。
Using 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
