如何对齐表单输入答案

【问题标题】：How to align form inputs如何对齐表单输入
【发布时间】：2014-12-31 08:07:35
【问题描述】：

在标签旁边对齐表单输入的最佳方法是什么

不使用固定的标签宽度，因为如果标签比指定的长度短很多，这看起来很糟糕（尤其是在使用相同形式的文本区域时，这看起来像 very bad）
不使用 2 列（作为内联 div 或表格），一列用于标签，一列用于输入，因为这将 break responsive layouts 其中标签和输入位于不同的行

【问题讨论】：

为什么会坏掉？ 1）您想让它们在所有屏幕上内联吗？如果是这样，它们在移动设备上也有两列，也不要堆叠。
考虑始终将标签放在输入上方。可用性研究（例如 this older one）表明，这会减少表单完成所需的时间。
@Sudheer 标签在大屏幕上的输入旁边，标签在小屏幕上的输入上方。

【解决方案1】：

检查这个小提琴..Link

 <label class="medium-inline">
   Label
 </label>
  <div class="medium-inline">
    <input type="text"/>
 </div>                                    


@media only screen and (min-width: 30em)  {
    .medium-inline{
        display:inline;
    }
}
@media only screen and (max-width: 30em)  {
    .medium-inline{
        display:block;
    }
}

我所做的只是将显示属性分别更改为内联和块。

【讨论】：

【解决方案2】：

一种方法是使用 flexbox 并在输入上设置 flex:1 以填充容器的剩余宽度

Demo 1

注意：上面的demo遵循OP的约束，标签上没有设置固定宽度。

如果min-width可以用在标签上（对应最长的标签），那么我们可以轻松更新代码以实现响应式/2列外观：

Demo 2

.container {
  width:80vw;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid black;
}
label {
  display: inline-block;
  padding: 8px 10px 0 0;
  /* min-width: 150px; (for demo 2) */
}
p {
  display: flex;
}
input {
  -webkit-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  -moz-box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  box-shadow: -2px 2px 10px 0px rgba(50, 50, 50, 0.22);
  border: 0;
  padding: 10px;
  flex: 1;
}

<div class="container">
  <form>
    <p>
      <label>*First Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Last Name</label>
      <input type="text" />
    </p>
    <p>
      <label>*Label3</label>
      <input type="text" />
    </p>
    <p>
      <label>Very very long label4</label>
      <input type="text" />
    </p>
  </form>
</div>

【讨论】：