对齐标签和文本字段答案

【问题标题】：align labels and textfields对齐标签和文本字段
【发布时间】：2020-03-12 23:29:19
【问题描述】：

是否可以为 label 和 input 类型分配 50% 的空间，使用以下 DOM 内容或为标签或输入创建单独标签的天真方法。

有问题的 DOM。如何处理以下 DOM

<label for="first">First Name: <input id="first" type="text"/></label>
<label for="last">Last Name: <input id="last" type="text"/></label>
<label for="email">Email: <input id="email" type="text"/></label>

视觉预期

标签宽度为 50%

输入 50% 宽度在其左侧对齐

简单的方法分离标签和输入

<label for="first">First Name: </label><input id="first" type="text"/>
<label for="last">Last Name: </label><input id="last" type="text"/>
<label for="email">Email: </label><input id="email" type="text"/>

CSS

label {
    width: 50%;
}
input {
    width: 50%
}

【问题讨论】：

标签： html css

【解决方案1】：

如果您正在寻找老式的解决方案，您可以将输入浮动到右侧：

label {
  display: block;
  clear: both;
}

input {
  width: 50%;
  float: right;
}

<label>First Name: <input id="first" type="text"/></label>
<label>Last Name: <input id="last" type="text"/></label>
<label>Email: <input id="email" type="text"/></label>

您可以将每个标签设置为具有两列的网格：

label {
  display: grid;
  grid-template-columns: 50% 50%;
}

<label>First Name: <input id="first" type="text"/></label>
<label>Last Name: <input id="last" type="text"/></label>
<label>Email: <input id="email" type="text"/></label>

【讨论】：

谢谢，我很感激，您能否以非网格或非基于弹性的方法附加答案，我想我必须分离标签和输入并删除输入嵌套。跨度>
对于弹性答案，我会选择@V.Volkov 的答案
对不起，我修正了评论，非网格和非 flex，纯香草 css。我喜欢给定的答案，但想要一个附加的解决方案
@AppDeveloper：flex 和 grid 是“纯原版 css，”为什么你认为你不能使用最新的布局选项？
顺便说一句，如果<input> 嵌套在<label> 中，则不需要<label> (HTMLLabelElement.htmlFor) 的for 属性（它不是无效的，也不是问题只要它对嵌套的<input> 具有正确的值，但这不是必需的，可以将其删除，以节省少量带宽）。

【解决方案2】：

两种变体：

label {
  display:flex;
  justify-content:space-between;
}
label > * {
  flex-basis:50%;
}

<label for="first">First Name: <input id="first" type="text"/></label>
<label for="last">Last Name: <input id="last" type="text"/></label>
<label for="email">Email: <input id="email" type="text"/></label>

label, input {
  display:inline-block;
  width:50%;
  box-sizing:border-box;
}

<label for="first">First Name: </label><input id="first" type="text"/>
<label for="last">Last Name: </label><input id="last" type="text"/>
<label for="email">Email: </label><input id="email" type="text"/>

【讨论】：

【解决方案3】：

div {
  width: 600px;
  background: #ccc;
}

label {
  display: inline-block;
  width: 50%;
}
input {
  box-sizing: border-box;
  width: 50%
}

<div>
  <label for="first">First Name: </label><input id="first" type="text" />
  <label for="last">Last Name: </label><input id="last" type="text" />
  <label for="email">Email: </label><input id="email" type="text" />
</div>

display: inline-block; 让您定义元素的尺寸，而无需像display: block; 那样在元素后添加换行符。 box-sizing: border-box; 让我们将输入元素的边框包含在其宽度中（如果没有这个，输入的实际宽度将超过 50% 并会导致换行）。

如果您希望它们位于宽度为 50% 的单独行上，只需将 inline-block 更改为 block，这将添加换行符。

【讨论】：

【解决方案4】：

试试这个.. 将您的标签和输入嵌套在表格中，并使用 50% 或 50vw 的宽度

【讨论】：