对齐标签和文本字段

Question

是否可以为具有以下DOM内容的label和input类型分配50%的空间，或者为标签或输入创建单独标记的简单方法。

有问题的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%
}

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

Answer 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"/>

Answer 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，即可添加换行符。

Answer 4

试试这个。。将标签和输入嵌套在表格的侧面，并使用50%或50vw的宽度进行