html - 将表单中的标签对齐到输入旁边

Question

我有非常基本和已知的表单场景，我需要在输入旁边正确对齐标签。但是我不知道该怎么做。

我的目标是标签与右侧的输入对齐。这是所需结果的图片示例。

为了您的方便，我制作了一个 fiddle 来澄清我现在拥有的东西 - http://jsfiddle.net/WX58z/

片段:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Answer 1

WARNING: OUTDATED ANSWER

Nowadays you should definitely avoid using fixed widths. You could use flexbox or CSS grid to come up with a responsive solution. See the other answers.

---

一种可能的解决方案:

• 给出标签display: inline-block;
• 给它们一个固定的宽度
• 右对齐文本

即:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle