html - 具有任意水平规则的等宽表格标签

Question

我有一个水平的label: <input>样式形式。标签需要等宽，但动态 - 基于表单中最长的标签。通常，我会用一系列 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>

CSS:

* { box-sizing: border-box; }
html, body { width: 100%; }

form {
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid red;
}

.group {
  display: table-row;
}

span {
  display: table-cell;
  background: #ddd;
  padding: 0 10px 0 0;
  white-space: nowrap;
  width: 1px;
}

input, hr {
  width: 100%;
}

标签宽度符合我的预期，但 hr无法填充 100% 宽度。我可以通过将其设置为 position: absolute 来获得正确的宽度，但后来我失去了行之间的间距。我可以把它变成 display: table-row但不再控制间距。

JSBin

Answer 1

这很有趣。

我不知道您对设计有多严格，但这是一个不错的解决方案。

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

在 hr 上使用 table-cell 您可以将其扩展到全宽，在 padding 和 上使用一些小技巧background-clip 你可以有一条简单的水平线。如果您想更进一步，您可以添加图像作为背景并使用 repeat-x 将其展开为全宽。