如何对齐表单输入

Question

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

• 没有使用固定的标签宽度，因为如果标签短于指定的长度（特别是当使用相同形式的textarea时，这看起来很very bad）
• 不使用2列（作为内联div或表），一列用于标签，一列用于输入，因为这将break responsive layouts，其中标签和输入位于不同的行上

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

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

Answer 2

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

的 Demo 1

NB：以上演示符合OP的约束，即标签上没有设置固定宽度。

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

的 Demo 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;