对齐文本和线并行

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>

Answer 2

对CSS进行一些更改：

.about {
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
}
hr{
  display:inline-block;
  width:200px;
  margin-bottom:0;
}

.about {
  display: inline-block;
  margin-right:12px;
  vertical-align: top;
}
hr{
  display:inline-block;
  width:200px;
  margin-bottom:0;
}

<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">hhhhhhhhhhhhhhh</div><hr/>
</div>

Answer 3

.about{
  display: inline-block;
}
hr{
  display: inline-block;
  width: 200px;
  margin-left: 10px;
  margin-bottom: 3px;
}

<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">hhhhhhhhhhhhhhh</div><hr/></div>

Answer 4

您只需将display:flex;发送给父母即可。

尝试此解决方案。

＆＃13;

＆＃13;

.align{
   display:flex;
}

.about{
   padding-right:12px;

}
hr{
  width:200px;
     margin-left: 0px;
}

＆＃13;

<div class="align">

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

另一种方式..

您也可以使用jquery执行此操作。 （由于您的问题中没有jquery标记，请将此作为次要选择。）

$("hr").each(function() {
  var abtwidth = $(this).parent().find(".about").width();
  var hrwidth = 300 - abtwidth;
  $(this).css('width',hrwidth);
});

FIDDLE