Html 具有任意水平规则的等宽表单标签

我有一个水平

标签：

样式表单。标签的宽度必须相等，但必须是动态的-基于表单中最长的标签。通常，我会用一系列

display:table/row/cell

元素来解决这个问题，但我们还需要一个水平规则来分隔其中一些行

display:table

与其中的非行/单元格元素不匹配

核心形式结构：

<form>
    <div class="group">
      <span>test</span>
      <div class="field">
        <input type="text">
      </div>
    </div>
    <hr>
    <div class="group">
      <span>test long</span>
      <div class="field">
        <input type="text">
      </div>
    </div>
    <div class="group">
      <span>test</span>
      <div class="field">
        <input type="text">
      </div>
    </div>
  </form>

标签宽度如我所期望的那样工作，但是

hr

无法填充100%的宽度。我可以通过将其设置为

位置：绝对

来获得正确的宽度，但这样就失去了行之间的间距。我可以将其设置为

显示：表格行

，但不再控制间距

这是一个有趣的例子

我不知道你对设计有多严格，但这里有一个好的解决方案

hr{
  display:table-cell;
  padding:10px 0;
  border:none;
  box-sizing:content-box;
  background:black;
  height:1px;
  background-clip:content-box;
}

---

使用

hr

上的

表格单元格

，您可以将其扩展到全宽，只需在

填充

和

背景剪辑

上耍点小把戏，就可以得到一条简单的水平线。如果您想更进一步，您可以添加图像作为背景，并使用

repeat-x

将其全宽展开。

为什么不使用

边框底部

而不是

hr

？因为这不允许我们控制分隔符前后的间距，这是至关重要的，我们的应用程序已经在类似的棘手情况下使用了hrs。我看到的唯一替代方法是在分隔符之前的元素上使用新类，并使用相邻的同级分隔符来控制下面元素的填充顶部。使丑陋的设置更加丑陋，但这可能是唯一的方法。

hr{
  display:table-cell;
  padding:10px 0;
  border:none;
  box-sizing:content-box;
  background:black;
  height:1px;
  background-clip:content-box;
}