文本旁边的下划线将它们分开

Question

我正在尝试实施以下内容：

你会看到有文字，然后是一条线。我试图使线条与文本保持相同的距离，因为屏幕尺寸减小。这样可以正常工作，但是当屏幕变小时，线路会进入“测试边界”状态。一部分。

请参阅下面的代码，了解我是如何实现这一点的。也许我应该采取不同的方法。

Also, a jsfiddle here for your convenience.

＆＃13;

＆＃13;

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%;
}

＆＃13;

<h3>Test Border</h3>
<div class="underline"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将两个块显示为表格并指定第一个块固定宽度（因为它只是不会更改的文本）。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="wrapper">
  <h3>Test Border</h3>
  <div class="underline"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我可能会像这样使用弹性盒子。

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 10px;
  transform: translate(0, -6px);
}

<div class="border">
  <span class="string">Test String</span>
  <div class="line"></div>
</div>

这将使标题与最长的不间断作品一样宽，边框将填满剩下的空间。

以下是每个标题之间的段落（几乎是现实世界的例子）

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 5px;
  transform: translate(0, -6px);
}

<div class="border">
  <span class="string">Lorem ipsum dolor</span>
  <div class="line"></div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
  sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
  sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
  magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
  <span class="string">Etiam quis molestie</span>
  <div class="line"></div>
</div>
<p>
  Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
  dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
  tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
  <span class="string">Phasellus sed orci</span>
  <div class="line"></div>
</div>
<p>
  Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
  lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
  ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
  commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
  <span class="string">Fusce ultricies ante</span>
  <div class="line"></div>
</div>
<p>
  Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
  tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
  viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
  nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>

Answer 3

我认为最好的解决方案是更改标记，因为使用您的代码时，h3标记中的文本可能会大于您的最大宽度（事实上，它是）。像这样：

＆＃13;

＆＃13;

.textline {
  display: table;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  display: table-cell;
  width: 9%;
  margin-right: 1%;
  vertical-align: bottom;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
  position: relative;
  top: -7px;
}

＆＃13;

<div class="textline">
  <h3>Test border</h3>
  <div class="underline"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以尝试 calc（）属性，它会起作用......

Check this fiddle here

你需要做什么，

h3 {
    font-size: 26px;
    display: inline-block;
    max-width:90px;
    margin-right:10px;
}

.underline {
    display: inline-block;
    border-bottom: 1px solid #c6bcb6;
    width: calc(100% - 104px);
}

Answer 5

当您使用百分比时，您必须考虑其他元素，宽度，边距，边框的固定度量...不同的1000px屏幕的90％，500px之一，剩余空间较少。 您可以使用calc来解决此问题：

h3 {
  font-size: 26px;
  color: #000 !important;
  width: 95px;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: calc(100% - 100px);
}

<h3>Test Border</h3>
<div class="underline"></div>

Answer 6

尝试以下CSS：

h3 {
  font-size: 26px;
  color: #000 !important;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  border-bottom: 1px solid #C6BCB6;
  width: 90%;
}

Answer 7

您可以尝试使用表格显示，文本和每行都有自己的单元格：

<div class="div-row">
    <div class="div-cell"><h3>Test Border</h3></div>
    <div class="div-cell underline"></div>
<div>

<强> CSS：

.div-row  {
    display: table-row;
    width: 100%;
}

.div-cell {
    display: table-cell;
}

我还没有对此进行测试，但是当您调整浏览器窗口大小时（或从桌面移动到移动设备）时，包含该行的div应自动缩小到可用宽度。

如果需要，您还可以为包含文本的div设置固定宽度。