我有一个非常基本且已知的表单场景，我需要正确对齐输入旁边的标签。但是我不知道该怎么做。
我的目标是将标签与右侧的输入对齐。这是所需结果的图片示例。
为了您的方便和澄清我现在拥有的东西，我做了一个小提琴 - http://jsfiddle.net/WX58z/
片段：
<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>【问题讨论】：
警告：过时的答案
如今，您绝对应该避免使用固定宽度。您可以使用 flexbox 或 CSS 网格来提出响应式解决方案。查看其他答案。
一种可能的解决方案：
display: inline-block;即：
label {
display: inline-block;
width: 140px;
text-align: right;
}<div class="block">
<label>Simple label</label>
<input type="text" />
</div>
<div class="block">
<label>Label with more text</label>
<input type="text" />
</div>
<div class="block">
<label>Short</label>
<input type="text" />
</div>【讨论】：
虽然这里的解决方案是可行的，但我认为更新的技术已经成为更好的解决方案。 CSS 网格布局 让我们能够构建更优雅的解决方案。
下面的 CSS 提供了一个 2 列的“设置”结构，其中第一列应该是右对齐的标签，然后是第二列中的一些内容。更复杂的内容可以通过将其包装在
[附带说明：我使用 CSS 在每个标签后面添加“:”，因为这是一个风格元素 - 我的偏好。]
/* CSS */
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap:5px;
}
div.settings label { text-align:right; }
div.settings label:after { content: ":"; }<!-- HTML -->
<div class="settings">
<label>Label #1</label>
<input type="text" />
<label>Long Label #2</label>
<span>Display content</span>
<label>Label #3</label>
<input type="text" />
</div>【讨论】：
grid-template-columns: max-content 1fr;，则第二列将使用所有剩余宽度。对我来说，这是此类布局的圣杯，无需指定列或内容宽度，并且所有内容都自动完美地适合可用空间。
之前回答过这样一个问题，你可以在这里看看结果：
Creating form to have fields and text next to each other - what is the semantic way to do it?
因此，要将相同的规则应用于您的小提琴，您可以使用 display:inline-block 并排显示您的标签和输入组，如下所示：
CSS
input {
margin-top: 5px;
margin-bottom: 5px;
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
margin-left:20px
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
padding-top: 5px;
text-align: right;
width: 140px;
}
【讨论】：
我使用类似的东西：
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>
风格：
.form-element label {
display: inline-block;
width: 150px;
}
【讨论】：
你也可以尝试使用 flex-box
<head><style>
body {
color:white;
font-family:arial;
font-size:1.2em;
}
form {
margin:0 auto;
padding:20px;
background:#444;
}
.input-group {
margin-top:10px;
width:60%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
label, input {
flex-basis:100px;
}
</style></head>
<body>
<form>
<div class="wrapper">
<div class="input-group">
<label for="user_name">name:</label>
<input type="text" id="user_name">
</div>
<div class="input-group">
<label for="user_pass">Password:</label>
<input type="password" id="user_pass">
</div>
</div>
</form>
</body>
</html>
【讨论】：
我知道这是一个旧线程，但更简单的解决方案是在标签中嵌入一个输入，如下所示：
<label>Label one: <input id="input1" type="text"></label>【讨论】：
你可以这样做：
HTML：
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
CSS：
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}
希望这会有所帮助！ :)
【讨论】：
这是所有表单标签的通用标签宽度。没有固定宽度。
使用所有标签调用 setLabelWidth 计算器。 此函数将加载 UI 上的所有标签并找出最大标签宽度。 将以下函数的返回值应用于所有标签。
this.setLabelWidth = function (labels) {
var d = labels.join('<br>'),
dummyelm = jQuery("#lblWidthCalcHolder"),
width;
dummyelm.empty().html(d);
width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
width = width > 0 ? width + 5: width;
//this.resetLabels(); //to reset labels.
var element = angular.element("#lblWidthCalcHolder")[0];
element.style.visibility = "hidden";
//Removing all the lables from the element as width is calculated and the element is hidden
element.innerHTML = "";
return {
width: width,
validWidth: width !== 0
};
};
【讨论】：