Question

首先：您必须看到以下图片。

enter image description here
如您所见，红色矩形，两个字段不对齐，顶部字段的开头有一点空间，而下一个字段则没有。
注意：所有浏览器都会出现此问题。

HTML

<body>
   <br /><br /><br /><br /><br />
   <div id="loginForm">
      <form action="login.php" method="post">
         <label> Username: <input type="text" name="username" id="username" /></label><br />
         <label> Password: <input type="password" name="password" id="password" /></label><br /><br />
         <input type="submit" name="sbmtLogin" value="login" />
      </form>
   </div>     
</body>

CSS

body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}

我该如何解决这个问题？

Answer 1

为什么输入文本和密码字段不对齐？

用户名和密码是不同长度的字词

我该如何解决这个问题？

使用等宽字体
在您设置为display: inline-block; width: ???的元素中包装单词???是固定值。

该元素可能是标签。

 <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
 <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>

label {
    display: inline-block;
    width: 7em; /* adjust to taste */
}

请记住，您将在不同的系统上获得不同的字体，因此如果您采用第二种方法，请给自己一些关于元素宽度的余地。

Answer 2

“用户名：”略宽于“密码：”

这就是他们没有对齐的原因。

您想要执行某些操作，例如将字段放在表格中或定义宽度div。

Answer 3

这是因为Username:的文字比Password:长几个像素？

您需要关闭标签标签，因此文本实际上在标签中（设置for属性也会通过单击标签使输入可选）

<body>
  <br /><br /><br /><br /><br />
  <div id="loginForm">
    <form action="login.php" method="post">
     <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
     <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>         <br /><br />
     <input type="submit" name="sbmtLogin" value="login" />
    </form>
  </div>     
</body>

然后在带有css的标签上放置一个公共宽度

div#loginForm form label {
    display: inline-block;
    width: 200px; // whatever looks best
}

Answer 4

并非所有字体的所有字符都具有相同的宽度。在您的情况下，用户名略大于密码，因此对齐问题。

要解决此问题，您需要将标签放在固定的框中

HTML - 将每个输入元素包装在div

中

<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
    <div><label>Username:</label><input type="text" name="username" id="username" /></div>
    <div><label>Password:</label><input type="password" name="password" id="password" /></div>
    <div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>

CSS - 设置标签宽度并将显示设置为内联块

    body {margin:0; padding:0;}
    div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
    div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
    div#loginForm input[type=submit] {width:70px;}
    #loginForm label { width: 100px; display: inline-block; }

为什么输入文本和密码字段不对齐？

4 个答案: