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

Question

假设我有10个输入字段,在左侧的输入字段之前,我有span标记,用于保存文本以指示用户应该在字段中输入的内容.我做了一些事情,但我不确定如何在span标记和输入字段之间添加空格,无论文本有多大？

像这样:

Answer 1

用label/input而不是input.它意味着与输入配对并保留一些额外的功能(单击标签会聚焦输入).

这可能正是您想要的:

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

jsfiddle DEMO在这里.

Answer 2

这可以使用全新的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

Answer 3

你可以用一张桌子

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

结果将是： ImageResult