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

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

我怎样才能解决这个问题？

来源

2014-01-17 Lion King

难道你不能把这些领域放在他们自己的'div's吗？ – admdrew

脱离主题，但我真的很讨厌连续5'
'。这是滥用！ –

@MrLister：给我另一个建议。 –

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

用户名和密码不同长度的话

我怎样才能解决这个问题？

使用等宽字体
裹在你设置为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 */ 
}

请记住，你会得到不同的系统上不同的字体，所以给自己留一点余地与元素的宽度，如果你采取第二种方式。

来源

2014-01-17 21:33:30 Quentin

“用户名：”比“密码：”稍宽。“

这就是为什么它们没有对齐。

你想要做的事情就像把字段放在表中或定义的宽度div。

来源

2014-01-17 21:32:59 ElGavilan

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

您需要关闭标签的标签，所以文字实际上是在标签（设置为属性也使得可选的输入通过点击标签）

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

来源

2014-01-17 21:33:54 davnicwil

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

要解决，你需要把标签的固定框

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

来源

2014-01-17 21:39:44 ZubaiR

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

回答

相关问题