使文本框對齊

我現在有一個問題。當我加載我的網頁時，所有的框/單詞都對齊得不對勁，我想知道是否可以將所有框對齊在一行。使文本框對齊

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

來源

2012-12-19 Waayzii

如何張貼截圖和/或[小提琴]（http://jsfiddle.net）說明問題？ –

您需要爲您的文本和輸入字段添加單元格或某種形式的劃分。輸入字段看起來很有趣，因爲它們在文本之後開始並且td與中心對齊，因此所有內容都在td中對齊中心。 –

你可以定義你自己的CSS定義對準

例如：

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

來源

2012-12-19 03:54:28

嘗試檢查這一個：Edited

希望這給這個想法（在我自己的方式:)）。

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

來源

2012-12-19 04:07:51 Vainglory07

如果你不介意的無表：

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

來源

2012-12-19 10:31:51

使文本框對齊

回答

相關問題