標籤右邊框沒有顯示

Question

我已經構建了一個小登錄表單。不幸的輸入的右邊界就是不露面，你可以在所附截圖中看到：

我已經建立了它的基礎上，從this post的建議有輸入的標籤和仍然右對齊使用剩餘的空間。

HTML：

<div id="wrapper"> 
    <form id="loginform"> 
     <label for="username">Username:</label> 
     <span><input name="username" id="username" type="text" autofocus /></span> 

     <label for="password">Password:</label> 
     <span><input name="password" id="password" type="password" /></span> 

     <input id="loginBtn" type="submit" name="submit" value="Login" /> 
    </form> 
</div> 

CSS：

#wrapper { 
    height: auto; 
    background-color: #dfe9f6; 
    margin: 40px 8px 8px 8px; 
    padding: 8px; 
    border: 1px solid #99bce8; 
} 
span { 
    margin-bottom: 8px; 
    display: block; 
    overflow: hidden; 
} 
label, input { 
    height: 17px; 
} 
label { 
    float: left; 
    width: 80px; 
} 
input { 
    border: 1px solid #abadb3; 
    width: 100%; 
} 
input[type="submit"] { 
    height: 22px; 
} 

上的jsfiddle（不）工作示例：http://jsfiddle.net/kN4wa/1/

我已經在Firefox 19 &測試的Chrome 25，真的希望一些幫助它！

謝謝

Answer 1

您已輸入{width：100％; }所以，邊框添加到這個寬度，使其高於父寬度，這就是爲什麼它不顯示;使其寬度：99.5％;或者只是99％而已。或者輸入box-sizing: border-box;即可。

隨着供應商名稱：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

Answer 2

只需添加

input { 
    border: 1px solid #abadb3; 
    -moz-box-sizing: border-box; /* partially supported */ 
    box-sizing: border-box; /* here is what I added */ 
    width: 100%; 
}