html - 标签的右边框未显示

Question

我已经建立了一个小的登录表单。不幸的是，输入的右边框没有显示，如您在随附的屏幕截图中所见：

我根据这篇文章的建议构建了它，以使输入与标签右对齐，并且仍然使用剩余空间。

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

只需添加

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+ */