我正在努力实施以下内容：
你会看到有文字,然后一条线到它的一边.我试图使线条与文本保持相同的距离,因为屏幕尺寸减小.这可以正常工作,但是当屏幕变小时,该行进入“测试边框”部分.
请看下面的代码,看看我是如何实现的.也许我应该采取不同的方法.
Also,a jsfiddle here for your convenience.
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: inline-block;
padding-bottom: 15px;
width: 8%;
}
.underline {
display: inline-block;
border-bottom: 1px solid #c6bcb6;
width: 90%;
}
<h3>Test Border</h3> <div class="underline"></div>
解决方法
您可以将这两个块显示为表,并指定第一个块固定宽度(因为它只是不改变的文本).
.wrapper {
display: table;
width: 100%;
vertical-align: bottom;
padding-bottom: 15px;
table-layout: fixed;
}
h3 {
font-size: 26px;
color: #000 !important;
max-width: 90px;
display: table-cell;
width: 85px;
}
.underline {
display: table-cell;
border-bottom: 1px solid #c6bcb6;
width: 100%;
position: relative;
top: -12px;
}
<div class="wrapper"> <h3>Test Border</h3> <div class="underline"></div> </div>
