css - 如何对齐表单中的输入框

Question

我正在寻找一种使用 CSS 直接输入的方法。我已经使用了一张 table ，但它不起作用。

这是未对齐的输入框的图片:

代码

<form action="register2.php" method="POST">
     <table>
        <tr>
        <td>
        First Name: <input type="text" name="name">
        </td>
        </tr>
        <tr>
        <td>
        Last Name: <input type="text" name="lname">
        </tr>
        </td>
        <tr>
        <td>
        UserName: <input type="text" name="uname">
        </tr>
        </td>
        <tr>
        <td>
        Email: <input type="text" name="email1">
        </tr>
        </td>
        <tr>
        <td>
        Confirm Email : <input type="text" name="email2">
        </tr>
        </td>
        <tr>
        <td>
        Password: <input type="password" name="pass1">
        </tr>
        </td>
        <tr>
        <td>
        Confirm Password: <input type="password" name="pass2">
        </tr>
        </td>
        <tr>
        <td>
        <input type="submit" name="Submit" value="Register">
        <tr>
        <td>
     </table>
    </form>

Answer 1

你的表结构有点不对..

<table>
<tr>
    <td>FirstName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>LastName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>UserName:</td>
    <td><input type="text" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input type="email" /></td>
</tr>
</table>

这是一个例子。 http://jsfiddle.net/aqm7kjbg/1/

剩下的就自己做吧... =) cheerio!