我希望这个特定 HR 的宽度在任何屏幕尺寸上都与其上方的“LARGER HEADER LIKE THIS”的宽度相同。我的 hr 的默认宽度为 245px，但对于这个特定的宽度，我希望与上面任何屏幕尺寸的文本宽度相同
hr {
border-top: 0px solid blue !important;
padding: 0;
margin-top: 0.5em !important;
border-width: 6px !important;
width: 245px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center">
<h1>HEADER 1</h1>
</div>
<div class="row text-center">
<h1>LARGER HEADER LIKE THIS</h1>
<hr>
</div>
更好的方法是使用hr样式作为要应用它的文本的伪元素。这是一个例子。
.hr {
display: inline-block;
}
.hr:after {
content: '';
display: block;
border-top: 6px solid blue;
margin-top: 0.5em;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<h1>HEADER 1</h1>
</div>
<div class="row text-center">
<h1 class="hr">LARGER HEADER LIKE THIS</h1>
</div>
</div>
但你也可以嵌套hr in the h1并限制大小h1的宽度以匹配内容display: inline-block; float: left/right; or position: absolute
h1 {
display: inline-block;
}
hr {
border-top: 0px solid blue !important;
padding: 0;
margin-top: 0.5em !important;
border-width: 6px !important;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<h1>HEADER 1</h1>
</div>
<div class="row text-center">
<h1>
LARGER HEADER LIKE THIS
<hr>
</h1>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
