无论文本长度如何，如何在标签和输入字段之间均匀添加空格？

问题描述 投票：0回答：6

假设我有 10 个输入字段，在左侧的输入字段之前有一个 span 标签，该标签包含文本以指示用户应在字段中输入什么内容。我做了一些事情，但我不确定如何在跨度标签和输入字段之间添加空格，无论文本有多大？

像这样：

enter image description here

forms css html
6个回答
45
投票

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;
}

jsfiddle 演示在这里。

16
投票

这可以使用全新的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。这会产生所需的效果。

JS-FIDDLE

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>

结果将是：

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>
0
投票

这对我来说非常有用

label{
font-size: 18px;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 400px;

}

-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>

希望你喜欢我的回答，这是一个简单而有效的技巧

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.