Html 将表单中的标签与输入对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9686538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align labels in form next to input
提问by Stan
I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don't know how to do it.
我有非常基本和已知的表单场景，我需要在输入旁边正确对齐标签。但是我不知道该怎么做。
My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.
我的目标是标签与右侧的输入对齐。这是所需结果的图片示例。
I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/
为了您的方便，我做了一个小提琴并澄清我现在所拥有的 - http://jsfiddle.net/WX58z/
Snippet:
片段：
<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>回答by bfavaretto
One possible solution:
一种可能的解决方案：
- Give the labels
display: inline-block; - Give them a fixed width
- Align text to the right
- 给标签
display: inline-block； - 给他们一个固定的宽度
- 将文本向右对齐
That is:
那是：
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>回答by David Rutherford
While the solutions here are workable, more recent technology has made for what I think is a better solution. CSS Grid Layoutallows us to structure a more elegant solution.
虽然这里的解决方案是可行的，但最近的技术已经成为我认为更好的解决方案。CSS Grid Layout允许我们构建一个更优雅的解决方案。
The CSS below provides a 2-column "settings" structure, where the first column is expected to be a right-aligned label, followed by some content in the second column. More complicated content can be presented in the second column by wrapping it in a <div>.
下面的 CSS 提供了一个 2 列的“设置”结构，其中第一列应该是一个右对齐的标签，然后是第二列中的一些内容。更复杂的内容可以通过将其包装在 <div> 中来呈现在第二列中。
[As a side-note: I use CSS to add the ':' that trails each label, as this is a stylistic element - my preference.]
[作为旁注：我使用 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>回答by Andres Ilich
Answered a question such as this before, you can take a look at the results here:
之前回答过这样的问题，你可以在这里看一下结果：
Creating form to have fields and text next to each other - what is the semantic way to do it?
创建表单以使字段和文本彼此相邻 - 这样做的语义方式是什么？
So to apply the same rules to your fiddle you can use display:inline-blockto display your label and input groups side by side, like so:
因此，要将相同的规则应用于您的小提琴，您可以使用display:inline-block并排显示标签和输入组，如下所示：
CSS
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;
}
回答by Mike G
I use something similar to this:
我使用类似的东西：
<div class="form-element">
<label for="foo">Long Label</label>
<input type="text" name="foo" id="foo" />
</div>
Style:
风格：
.form-element label {
display: inline-block;
width: 150px;
}
回答by user6797117
You can also try using flex-box
您也可以尝试使用 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>
回答by Robert
I know this is an old thread but an easier solution would be to embed an input within the label like so:
我知道这是一个旧线程，但更简单的解决方案是在标签中嵌入一个输入，如下所示：
<label>Label one: <input id="input1" type="text"></label>回答by Rakonjac
You can do something like this:
你可以这样做：
HTML:
HTML：
<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>
CSS:
CSS：
.div{
margin-bottom: 10px;
display: grid;
grid-template-columns: 1fr 4fr;
}
.input{
width: 50%;
}
Hope this helps ! :)
希望这可以帮助 ！:)
回答by Samyak Jain
Here is generic labels width for all form labels. Nothing fix width.
这是所有表单标签的通用标签宽度。没有固定宽度。
call setLabelWidth calculator with all the labels. This function will load all labels on UI and find out maximum label width. Apply return value of below function to all the labels.
使用所有标签调用 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
};
};
