Question

我正在寻找一种使用CSS直接输入的方法。我已经使用了一张桌子而且它没有用。

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

CODE

<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

像这样使用text align和float：

＆＃13;

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: left; /*Change to right here if you want it close to the inputs*/
}
input {
  display: inline-block;
  float: left;
}

＆＃13;

 <html>
  <div>
      <label>First Name:</label><input type="text">
      <label>Last Name:</label><input type="text">
      <label>Email:</label><input type = "text">
      <label>Username:</label><input type="text">
  </div>
 </html>

＆＃13;

Answer 2

你桌子的结构有些不对..

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

如何在表单中对齐输入框

2 个答案: