html - 并排排列标签和输入的最佳方式

Question

如果不使用表格或 display:table，是否可以为输入左侧的标签设置一个灵活的宽度区域？出于浏览器兼容性原因，我还想避免使用网格布局。我想要 css 来处理这个问题:

short_label   input_box____________________
tiny_label    input_box____________________
medium_label  input_box____________________

然后相应地处理更大的标签:

short_label            input_box__________
medium_label           input_box__________
very_extra_long_label  input_box__________

但我不想:

short_label            input_box__________
tiny_label             input_box__________
medium_label           input_box__________

所以第一列需要有一个灵活的宽度，第二列需要增长来填充空间。我的 html 理想情况下看起来像这样，但如果需要，可以添加“行”div。我觉得有一个灵活的答案，但也许不是，因为所有行都需要对齐。

<div class='aligned_form'>

  <label for='a'>short_label</label>
  <input type='text' id='a'>

  <label for='b'>medium_label</label>
  <input type='text' id='b'>

  <label for='c'>very_extra_long_label</label>
  <input type='text' id='c'>

</div>

Answer 1

对齐元素:拉伸(stretch)

Flexbox 有一个通常称为“等高列”的特性。此功能使同一容器中的 flex 元素都具有相同的高度。

此功能来自两个初始设置:

• flex-direction: row
• 对齐元素:拉伸(stretch)

稍微修改一下，这个特性就可以变成“等宽行”。

• flex-direction: column
• 对齐元素:拉伸(stretch)

现在，一列 flex 元素将具有最长元素的宽度。

引用:

• Equal Height Columns with Flexbox

---

对齐内容:拉伸(stretch)

flex 容器的初始设置是 align-content: stretch。此设置将在容器的整个长度上分布行或列(取决于 flex-direction)。

在这种情况下，为了将两列打包到容器的开头，我们需要使用 align-content: flex-start 覆盖默认值。

引用资料:

• Remove space (gaps) between multiple lines of flex items when they wrap
• How does flex-wrap work with align-self, align-items and align-content?

---

flex-direction: column, flex-wrap: wrap 和 height

由于您有一个首选的 HTML 结构(所有表单元素在一个容器中逻辑排序)， flex 元素将需要换行以形成一列标签和一列输入。

所以我们需要用 wrap 覆盖 flex-wrap: nowrap(默认值)。

此外，容器必须有固定的高度，以便元素知道在哪里包装。

引用资料:

• Is it possible for flex items to align tightly to the items above them?
• Make a div span two rows in a grid

---

顺序属性

order 属性是正确对齐标签和跨列输入所必需的。

引用:

• Is there a “previous sibling” CSS selector?

---

.aligned_form {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 75px;
}

label[for='a'] { order: -3; }
label[for='b'] { order: -2; }
label[for='c'] { order: -1; }

label, input {
  height: 25px;
  padding: 5px;
  box-sizing: border-box;
}

<!-- No changes to the HTML. -->

<div class='aligned_form'>

  <label for='a'>short_label</label>
  <input type='text' id='a' placeholder="short_label">

  <label for='b'>medium_label</label>
  <input type='text' id='b' placeholder="medium_label">

  <label for='c'>very_extra_long_label</label>
  <input type='text' id='c' placeholder="very_extra_long_label">

</div>

jsFiddle demo 1

---

改变 HTML 结构

如果您可以更改 HTML，这里有一个替代解决方案。

• 一个主 flex 容器，带有两个 flex 元素列(标签和输入)
• 将 flex: 1 添加到 inputs 列，以便它占用行中的所有可用空间并将 labels 列打包到其最长元素的宽度

form {
  display: flex;
}

form > div {
  display: flex;
  flex-direction: column;
}

form > div:last-child {
  flex: 1;
}

label, input {
  height: 25px;
  padding: 5px;
  box-sizing: border-box;
}

<form>
  <div>
    <label for='a'>short_label</label>
    <label for='b'>medium_label</label>
    <label for='c'>very_extra_long_label</label>
  </div>
  <div>
    <input type='text' id='a' placeholder="short_label">
    <input type='text' id='b' placeholder="medium_label">
    <input type='text' id='c' placeholder="very_extra_long_label">
  </div>
</form>

jsFiddle demo 2