我有一个非常基本和已知的表单场景，需要正确对齐输入旁边的标签。但是我不知道该怎么做。
我的目标是使标签在右侧输入旁边对齐。这是期望结果的图片示例。
为了方便起见，我做了一个小提琴，以澄清我现在所拥有的-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>Answers:
一种可能的解决方案：
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列的“设置”结构，其中第一列应为右对齐标签，第二列中应包含一些内容。通过将其包装在<div>中，可以在第二列中显示更复杂的内容。
[作为旁注：我使用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;，则第二列将使用所有剩余宽度。对我来说，这是此类布局的圣杯，其中不必指定列或内容的宽度，并且所有内容都自动完美地适合于可用空间。
之前回答了这样的问题，您可以在这里查看结果：
因此，要将相同的规则应用于小提琴，可以用来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;
}您也可以尝试使用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>这是所有表单标签的通用标签宽度。没有固定宽度。
调用带有所有标签的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
};
};