将表单元素移动到它们看起来堆叠的位置

Question

我有一个我正在创建的登录表单...问题是，我无法正确对齐文本框和文本。

目前看起来像这样：

但我需要它看起来像：

这很难解释。我真正想要的是文本和文本框保持在相同的X轴上，但Y轴可以更改。

我认为它需要一张桌子，但我不知道如何使用它们。如果它确实需要一个，那么如何使用表格来对齐这些表格将会很棒。

感谢您的帮助。

Answer 1

将text-align与float/display: inline-block一起使用。输入是标签内部。实施例。

<label>
    <span>username:</span>
    <input>
</label>

<label>
    <span>password:</span>
    <input>
</label>

<label>
    <span>country:</span>
    <select>
        <option>option
    </select>
</label>

<style>
    label {display: block; overflow: hidden; margin: 5px 0 0; height: 24px; line-height: 24px;}
    label > * {float: left;}
    label span {width: 90px; text-align: right; margin-right: 5px;}
    label span + * {width: 100px; height: 20px; line-height: 20px; padding: 0;}
</style>

http://jsfiddle.net/tb34rv1x/

或第二个（很多）选项。输入超出label s：

<label for="a">username</label>
<input id=a>

<label for="b">password:</label>
<input id=b>

<label for="c">country:</label>
<select id="c">
    <option>option
</select>

<style>
    label {float: left; clear: left; width: 100px; text-align: right; margin-right: 10px;}
    label + * {float: left;}
    * {margin-top: 5px;}
</style>

http://jsfiddle.net/tb34rv1x/1/

Answer 2

如果您是网络开发新手，请使用该表。

<table>
  <tr>
    <td>First name: </td>
    <td><input type="text" name="fname"></td>
  </tr>
  <tr>
    <td>Last name: </td>
    <td><input type="text" name="lname"></td>
  </tr>
</table>

这是jsFiddle：example

对于更高级的版本，请使用div-s。像Other post.

一样