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>本身，它将折叠到最宽项目的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：我建议使用<dl>，因为它似乎更适合您的（虚拟）数据。也就是说，你当然可以像这样包装你的段落：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

另一种选择......

＆＃13;

section {
    display: inline-block;
}
section > div {
    border-top: 2px solid orange;
    display: block;
}
p {
    font-weight: bold;
}

＆＃13;

<section>
    <div>
        <p>Title1</p>
        <span>blablablablablablablabla</span>
    </div>

    <div>
        <p>Title2</p>                    
        <span>blablablablablablablablablablablablablablablabla</span>
    </div>
</section>

＆＃13;

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

2 个答案: