比较元素相对于另一个元素

Question

我有一个简单的html代码用于渲染数据库查询的输出,其中文本部分由行分隔:

____________________
<p> Title1 <p>
<span>blablablablablablablabla</span>
____________________
<p> Title2 <p>
<span>blablablablablablablablablablablablablablablabla</span>

如何自动调整这些行的长度,使它们与页面上最长的行一样长,如下所示:

________________________________________________
Title1 
blablablablablablablabla
________________________________________________
Title2
blablablablablablablablablablablablablablablabla

Answer 1

考虑通过发出<dl>替换来更改标记.然后,您只需向标题条目添加顶部边框,而不是使用一堆下划线.如果你申请display: inline-block的<dl>本身,它会崩溃到最宽项目的宽度.

dl {
  display: inline-block;  
}
dt {
  border-top: 1px solid #000;
  font-weight:bold;
}
dd {
  margin: 0;  
}

<dl>
  <dt>Title1</dt>
  <dd>blablablablablablablabla</dd>
  <dt>Title2</dt>
  <dd>blablablablablablablablablablablablablablablabla</dd>  
</dl>

注意:我建议a,<dl>因为它似乎更适合您的(虚拟)数据.也就是说,你当然可以像这样包装你的段落:

.wrapper {
  display: inline-block;        
}
.wrapper p {
  border-top: 1px solid #000;
}

<div class="wrapper">
  <p>Title1<br>blablablablablablablabla</p>
  <p>Title2<br>blablablablablablablablablablablablablablablabla</p>
</dl>