最好的方法来并排排列标签和输入

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

align-items: stretch

Flexbox具有通常称为"相等高度列"的功能.此功能使同一容器中的柔性物品的高度均相等.

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

• flex-direction: row
• align-items: stretch

稍作修改,此功能可以变为"等宽行".

• flex-direction: column
• align-items: stretch

现在,一列弹性项目将具有最长项目的宽度.

参考:

• 使用Flexbox的相等高度列

align-content: stretch

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

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

参考文献:

• 包裹时,删除多行柔性物品之间的空隙(间隙)
• flex-wrap如何使用align-self,align-items和align-content？

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

由于您有一个首选的HTML结构(所有表单元素在一个容器中按逻辑顺序排列),因此Flex项目需要换行才能形成一列标签和一列输入.

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

此外,容器必须具有固定的高度,以便物品知道包裹的位置.

参考文献:

• 柔性物品是否可以与其上方的物品紧密对齐？
• 使div在网格中跨越两行

该order物业

order需要该属性才能在列之间正确对齐标签和输入.

参考:

• 是否有"以前的兄弟"CSS选择器？

.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演示1

更改HTML结构

如果您可以更改HTML,这里是另一种解决方案.

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

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演示2

Answer 2

我知道你说过你不想要 CSS Grid 布局，但我将在此处添加它以用于文档目的。如果您不介意支持问题，我认为这是最干净的解决方案。

您始终可以通过替换1fr为像素或其他值来为输入设置固定宽度。也align-self被垂直居中标签和投入，如果你愿意底部对齐的变化center来end。这也使 HTML 保持超级干净！

.container{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [label] auto [input] 1fr;
}
input {
  grid-column: input;
  align-self: center;
}
label {
  grid-column: label;
  align-self: center;
}

<div class="container">
      <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>