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

像这样：

2019年答案：

一段时间过去了，我现在改变了构建表单的方法。直到今天我已经做了数千个，并且真的厌倦了为每个输入 idlabel/input一对，所以这个被冲进马桶了。当你潜水时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;
}

小提琴演示 https://jsfiddle.net/vb6Ln9ko/

原答案：

Use 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 演示在这里。 http://jsfiddle.net/qAhQf/1/