Html 无论文本长度如何，如何在标签和输入字段之间均匀添加空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17275707/
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
How do I evenly add space between a label and the input field regardless of length of text?
提问by starbucks
Let's say I have 10 input fields and before the input fields on the left side I have span tag that holds the text to indicate what the user should enter into the field. I did some stuff but I am unsure how to add space in between the span tag and the input field regardless of how big the text is?
假设我有 10 个输入字段，在左侧的输入字段之前，我有一个 span 标签，用于保存文本以指示用户应在该字段中输入的内容。我做了一些事情，但我不确定如何在 span 标签和输入字段之间添加空格，而不管文本有多大？
Like this:
像这样：
回答by Petr ?ihula
2019 answer:
2019年答案：
Some time has passed and I changed my approach now when building forms. I've done thousands of them till today and got really tired of typing id for every label/inputpair, so this was flushed down the toilet. When you dive inputright into the label, things work the same way, no ids necessary. I also took advantage of flexboxbeing, well, very flexible.
一段时间过去了，我现在在构建表单时改变了我的方法。直到今天，我已经完成了数千个并且真的厌倦了为每一label/input对输入 id ，所以它被冲进了马桶。当您input直接进入 时label，事情以相同的方式工作，不需要 id。我还利用了flexbox非常灵活的优势。
HTML:
HTML：
<label>
Short label <input type="text" name="dummy1" />
</label>
<label>
Somehow longer label <input type="text" name="dummy2" />
</label>
<label>
Very long label for testing purposes <input type="text" name="dummy3" />
</label>
CSS:
CSS：
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
Original answer:
原答案：
Use labelinstead of span. It's meant to be paired with inputs and preserves some additional functionality (clicking label focuses the input).
使用label代替span。它旨在与输入配对并保留一些附加功能（单击标签聚焦输入）。
This might be exactly what you want:
这可能正是您想要的：
HTML:
HTML：
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
CSS:
CSS：
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
回答by 0xcaff
This can be accomplished using the brand new CSS display: grid(browser support)
这可以使用全新的 CSS display: grid（浏览器支持）来完成
HTML:
HTML：
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
CSS:
CSS：
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
When using css grid, by default elements are laid out column by column then row by row. The grid-template-columnsrule creates two grid columns, one which takes up 1/4 of the total horizontal space and the other which takes up 3/4 of the horizontal space. This creates the desired effect.
使用 css 网格时，默认情况下元素按列布局，然后按行布局。该grid-template-columns规则创建两个网格列，一个占据总水平空间的 1/4，另一个占据水平空间的 3/4。这会产生所需的效果。
回答by Jorciney
You can use a table
你可以用一张桌子
<table class="formcontrols" >
<tr>
<td>
<label for="Test">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="Test" name="Test" value="John">
</td>
</tr>
<tr>
<td>
<label for="Test">Last name:</label>
</td>
<td style="padding-left:10px;">
<input id="lastName" name="lastName" value="Travolta">
</td>
</tr>
</table>
The result would be: ImageResult
结果将是： ImageResult
回答by Divyesh Rupawala
You can also used below code
您也可以使用下面的代码
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
回答by Tushar Gupta
You can always use the 'pre' tag inside the label, and just enter the blank spaces in it, So you can always add the same or different number of spaces you require
您始终可以在标签内使用“pre”标签，只需在其中输入空格，这样您就可以随时添加所需的相同或不同数量的空格
<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of
spaces</pre>
<input type="text"></label>
</form>
Hope you like my answer, It's a simple and efficient hack
希望你喜欢我的回答，这是一个简单而有效的黑客
