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;
}

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

具有任意水平规则的等宽形式标签

1 个答案: