假设我有 10 个输入字段，在左侧的输入字段之前，我有 span 标签，其中包含文本以指示用户应该在该字段中输入的内容。我做了一些事情，但我不确定如何在跨度标记和输入字段之间添加空格，无论文本有多大？
像这样：
问问题
182688 次
5 回答
39
2019年回答：
一段时间过去了，我现在在构建表单时改变了我的方法。直到今天我已经完成了数千次，并且真的厌倦了为每一label/input对输入 id，所以这被冲进了马桶。当您input直接进入 时label，事情以相同的方式工作，不需要 id。我还利用了flexbox非常灵活的优势。
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：
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;
}
原答案：
使用label而不是span. 它旨在与输入配对并保留一些附加功能（单击标签聚焦输入）。
这可能正是您想要的：
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：
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
于 2013-06-24T12:51:44.067 回答
14
这可以使用全新的 CSS display: grid（浏览器支持）来完成
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：
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
使用 css 网格时，默认情况下元素是逐列然后逐行布置的。该grid-template-columns规则创建了两个网格列，一个占据了总水平空间的 1/4，另一个占据了水平空间的 3/4。这会产生所需的效果。
于 2017-07-24T01:54:53.010 回答
6
你可以用一张桌子
<table class="formcontrols" >
<tr>
<td>
<label for="firstName">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="firstName" name="firstName" 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>
结果将是：
于 2016-12-09T10:07:26.523 回答
2
您也可以使用下面的代码
<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>
于 2013-06-24T13:04:55.780 回答
-2
您始终可以在标签内使用“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>
希望你喜欢我的回答，这是一个简单而高效的 hack
于 2017-08-25T16:05:22.990 回答