Question

我正在尝试使用用户名，密码和电子邮件制作表单。但由于某种原因，输入文本或电子邮件框与用户名和密码的框不对齐。我想知道是否有办法使它们彼此对齐。

<form>
   <label for="username">Username</label>
    <input type="text" id="username" name="username" maxlength="30"><br><br>
   <label for="password">Password</label>
    <input type="password" id="password" name="password"><br><br>
   <label for="email">Email</label>
    <input type="email" id="email" name="email" maxlength="30">
    <br>
   <input type="submit" value="Register">
</form>

这只是为了让一切看起来都很漂亮。

Answer 1

哦，男人......桌子？来自＆＃39; 90s传入的HTML！

<style>
label {
    width: 80px;
    display: inline-block;
}
</style>
<form>
   <label for="username">Username</label>
    <input type="text" id="username" name="username" maxlength="30"><br><br>
   <label for="password">Password</label>
    <input type="password" id="password" name="password"><br><br>
   <label for="email">Email</label>
    <input type="email" id="email" name="email" maxlength="30">
    <br>
   <input type="submit" value="Register">
</form>

Answer 2

我选择了不同于桌子的方法，因为如果你打算填写表格，我建议你使用一个坚固的css框架，这更好。

这只是CSS的方法 A Cool Fiddle

form {
width: 80%;
margin: 0 auto;
}

label, input {
    /* in order to define widths */
    display: inline-block;
}

label {
    width: 30%;
    /* positions the label text beside the input */
    text-align: right;
}

label + input {
    width: 30%;
    /* large margin-right to force the next element to the new-line
       and margin-left to create a gutter between the label and input */
    margin: 0 30% 0 4%;
}

/* only the submit button is matched by this selector,
   but to be sure you could use an id or class for that button */
input + input {
    float: right;
}

input[type="submit"]{
 margin: 4% 40%;  

}

尽管如此，我还建议您将使用标签值写入的表单的旧方式更改为占位符。

了解更多参考资料 Placeholders are cool!

Answer 3

<form>
      <table>
           <tr> <td> <label for="username">Username</label> </td> <td> <input type="text" id="username" name="username" maxlength="30"> </td> </tr>
           <tr> <td> <label for="password">Password</label> </td> <td> <input type="password" id="password" name="password"></td> </tr>
           <tr> <td>  <label for="email">Email</label> </td> <td><input type="email" id="email" name="email" maxlength="30"></td> </tr>
           <tr> <td></td> <td> <input type="submit" value="Register"> </td> </tr>
       </table>
</form>

应该可以工作，只需用桌子就可以了。

Answer 4

<table>
<form>
<tr>
  <td> <label for="username">Username</label></td>
  <td> <input type="text" id="username" name="username" maxlength="30"> </td>
</tr>

<tr>
   <td><label for="password">Password</label></td>
   <td><input type="password" id="password" name="password"></td>
</tr>

<tr>

   <td><label for="email">Email</label></td>
   <td><input type="email" id="email" name="email" maxlength="30"></td>
</tr>

<tr>
   <td><input type="submit" value="Register"></td>
</tr>


</form>
</table>

在表格或分区中制作任何表格总是一种好习惯。

你如何对齐输入文本？

4 个答案: