html - 使文本框对齐

Question

我现在有一个问题。当我加载我的网页时，所有的框/单词都对齐得很尴尬，我想知道是否可以帮助我将所有框对齐到同一行。

单击此处查看 jsfiddle 演示

<table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
    <tr>
    <td width="10%" valign="top" align="center">
        <form name="form1" method="post" action="checklogin.php">
        <font size="5"><strong>Account Login</strong></font><br />
        Username :
        <input name="myusername" type="text" id="myusername"><br />
        Password :
        <input name="mypassword" type="password" id="mypassword"> <br />
        &nbsp;
        &nbsp;
        <input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login">
        </form>
    </td>
    <td width="10%" valign="top" align="center">
        <form id="form1" name="form1" method="post" action="registration_script.php">
        <font size="5"><strong>Account Register</strong></font><br />
        Username :
        <input type="text" name="txtUser" id="txtUser" /> <br />
        Repeat :
        <input name="myusername" type="text" id="myusername"><br />
        Password :
        <input type="password" name="txtPassword" id="txtPassword" /> <br />
        Repeat :
        <input name="myusername" type="text" id="myusername"><br />
        <input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" />
    </td>
    </tr>
    </form>
</table>

Answer 1

尝试检查这个：已编辑

希望这给出了这个想法（以我自己的方式:)）。

 <table bgcolor="#bbbbbb" width="100%" border="0" cellspacing="0" cellpadding="0" valign="center">
<tr>
<td width="10%" valign="top" align="center">
    <form name="form1" method="post" action="checklogin.php">
    <table>
        <thead align="center">Account Login</thead>
        <tr>
            <td>Username :</td>
            <td><input name="myusername" type="text" id="myusername"></td>
        </tr>
        <tr>
            <td>Password :</td>
            <td><input name="mypassword" type="password" id="mypassword"></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="Submit" value="Login"></td>
        </tr>
    </table>
    </form>
</td>
<td width="10%" valign="top" align="center">
    <form id="form1" name="form1" method="post" action="registration_script.php">
    <table>
        <thead align="center">Account Register</thead>
        <tr>
            <td>Username :</td>
            <td> <input type="text" name="txtUser" id="txtUser" /></td>
        </tr>
        <tr>
            <td>Repeat :</td>
            <td><input name="myusername" type="text" id="myusername"></td>
        </tr>
        <tr>
            <td>Password :</td>
            <td><input type="password" name="txtPassword" id="txtPassword" /></td>
        </tr>
        <tr>
            <td>Repeat :</td>
            <td><input name="myusername" type="text" id="myusername"></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="1"><input style="width:75px; font-size:14px; height:25px;" type="submit" name="btnRegister" id="btnRegister" value="Register" /></td>
        </tr>
    </table>
    </form>
</td>
</tr>

​</p>

Answer 2

您可以定义自己的 css 来定义对齐方式

例如：

<style>
 selector{
  float:left;
 }
</style>

Answer 3

如果您不介意无桌子：

<style>
    .pseudo-table, form p {
        display: table;
        background-color: #bbbbbb;
    }

    .pseudo-cell, form p label {
        display: table-cell;
        vertical-align: top;
    }

    form p label {
        width: 100px;
    }
</style>

<div class='pseudo-table'>
    <div class='pseudo-cell'>
        <form name='form1' method='post' action='checklogin.php'>
        <h2>Account Login</h2>
        <p>
            <label>Username</label>
            : <input name='myusername' type='text' id='myusername'>
        </p>
        <p>
            <label>Password</label>
            : <input name='mypassword' type='password' id='mypassword'>
        </p>
        <button>Login</button>
        </form>
    </div>
    <div class='pseudo-cell'>
        <form name='form2' method='post' action='registration_script.php'>
        <h2>Account Register</h2>
        <p>
            <label>Username</label>
            : <input type='text' name='txtUser' id='txtUser'>
        </p>
        <p>
            <label>Repeat</label>
            : <input name='myusername' type='text' id='myusername'>
        </label>
        <p>
            <label>Password</label>
            : <input type='password' name='txtPassword' id='txtPassword'>
        </p>
        <p>
            <label>Repeat</label>
            : <input name='myusername' type='text' id='myusername'>
        </p>
        <button>Login</button>
        </form>
    </div>
</div>