标签的右边框未显示

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＆amp; Chrome 25，非常感谢一些帮助！

由于

Answer 1

只需添加

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

Answer 2

您输入{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+ */