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

Question

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

目前看起来是这样的：

但我需要它看起来像：

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

我认为它需要 table，但我不知道如何使用它们。如果它确实需要一个，解释如何使用 table 来对齐这些表格会很棒。

感谢您的帮助。

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/

或第二个（许多）选项。输入在 labels 之外：

<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

好吧，如果您是 Web 开发新手，请使用该表。

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

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

Moving form elements into a position where they look stacked

html

css

forms

alignment