爲什麼輸入的文本和密碼字段不對齊？

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

爲什麼輸入的文本和密碼字段不對齊？

回答

相關問題