首先:你必须看到下图。
如你所见，红色矩形，两个字段没有对齐，顶部字段的开始有一点空间，而下一个字段没有。
注意:所有浏览器都会出现这个问题。
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;}
我该如何解决这个问题？
最佳答案
Why the input text and password fields are not line up?
用户名和密码是不同长度的单词
How can I fix that problem ?
- 使用等宽字体
- 将单词包装在您设置为
display: inline-block; 的元素中宽度:???其中 ???是固定值。
该元素可以是标签。
<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 */
}
请记住，您会在不同的系统上获得不同的字体，因此如果您采用第二种方法，请在元素的宽度方面留出一些余地。
关于html - 为什么输入文本和密码字段不对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21196251/