Html 如何对齐输入文本？

我试图用用户名、密码和电子邮件制作一个表单。但由于某些原因，输入文本或电子邮件框与用户名和密码框不对齐。我想知道是否有办法让它们彼此对齐

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

用户名



密码



电子邮件

这只是为了让每件事都看起来漂亮

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

用户名
密码
电子邮件

应该有用，就用桌子围起来。

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

用户名
密码
电子邮件

---

无论是在桌子上还是在桌子上，制作任何表格都是很好的做法。

哦，伙计。。。桌子？？90年代的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>

标签{
宽度：80px；
显示：内联块；
}
用户名



密码



电子邮件

我选择了一种不同于表格的方法，因为如果您要将表单列成表格，我建议您使用可靠的css框架，这会更好。

这只是CSS的方法

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

}

综上所述，我还建议您将使用标签值编写表单的旧方式更改为占位符

---

有关更多参考信息，请创建一个？始终小提琴和小提琴。。。给我们css！我猜，他没有css-@noob1234看起来不错-：）哈哈，没错`90年代即将来临。我感觉你会被处以私刑。这里有一些狂热分子。占位符没有那么复杂。我绝不会让他去那里学习，只是为了观察占位符的概念干杯

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

}