html - 对齐文本和线平行

Question

有 4 个 div，其中包含文本和一行。文本将来自服务电话，可能会有所不同。问题是线没有正确显示它的长度不同。主要条件是 1)所有的线都应该在同一点结束。 2)线应该是 30px 从边距和 3)文字与线条的间距应为12px。

.about{
    display: inline-block;
}
hr{
  display:inline-block;
  width:200px;
}

<div>

<div class="about">Chapter</div><hr/></div>
<div>
<div class="about">Learning Objectives</div><hr/></div>
<div>
<div class="about">Pages</div><hr/></div>
<div>
<div class="about">Sections</div><hr/></div>

我尝试了 min,max-width 但找不到解决方案。谁能提供更好的解决方案？

Answer 1

试试这个。

.about {
  float: left;  
}
hr {
  width: auto;
  margin-left: 30px;
}
.test {
  overflow: hidden;
}

<div class="test">
  <div class="about">Chapter</div>
  <hr/>
</div>
<div class="test">
  <div class="about">Learning Objectives</div>
  <hr/>
</div>
<div class="test">
  <div class="about">Pages</div>
  <hr/>
</div>
<div class="test">
  <div class="about">hhhhhhhhhhhhhhh</div>
  <hr/>
</div>