html - 你如何对齐输入文本？

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

天啊…… 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>