为什么不是所有100％的DIV都被使用？

Question

我有以下HTML代码：

<div class="dispLoginSearch"> <!-- LOGIN AND SEARCH -->
    <div class="loginBox">
        <p>Log in to <span>My</span> <span>M</span> | Sign Up</p>
        <div style="width: 100%; padding: 0; margin: 0; overflow: hidden; height: 38px;" class="brClear">
            <input type="text" placeholder="Username" id="txtUsername" class="txtUsername styledTB floatLeft" />
            <input type="password" placeholder="Password" id="pwPassword" class="txtPassword styledTB floatLeft" />
            <a href="JavaScript:void(0);" class="styledBtn logBtn floatLeft">Login</a>
        </div>
        <a href="#">Forgot login/password</a>
    </div>
</div>

CSS：

.dispLoginSearch
{
    width: 40%;
    height: 180px;
    vertical-align: middle;
    float: right;
    padding-right: 3%;
    background: #FFFFFF;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
.loginBox {
    margin-top: 3%;
    border: 1px solid #d4d4d4;
    display: block;
    width: 100%;
    font: 16px sans-serif;
    padding: 0 0 0 15px;
    border-radius: 5px;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    overflow: auto;
}
.loginBox p {
    margin: 5px 0 0;
    font-size: 20px;
    line-height: 35px;
}
.txtUsername{
    width: 38%;
    margin-right: 2%;
    height: 30px;
}
.txtPassword {
    width: 38%;
    margin-right: 2%;
    height: 30px;
}
.floatLeft
{
    float: left;
}
.logBtn
{
    width: 10%;
    height: 30px;
    line-height: 30px;
}
.styledBtn
{
    background: #d75813;
    display: block;
    box-shadow:
        0px 5px #BC490A,
        0px 8px 10px rgba(148, 148, 148, 0.5);
    text-align: center;
    vertical-align: middle;
}
.styledTB {
    padding-left: 5px;
    background: #E8E8E8;
    opacity: 1;
    border: none;
    outline: none;
    right: 35px;
    box-shadow:
        0px 5px #BBB,
        0px 8px 10px rgba(148, 148, 148, 0.5);
}

如果我将logBtn保持在10％，它会保持在同一行，但这封信几乎被切断了：

如果我将百分比增加到12％，而不是在同一条线上展开以填充DIV，它会转到下一行：

由于某种原因，我无法使用父DIV的100％宽度。我在忘记登录/密码链接上使用了float: right，这就是它走了多远。出于某种原因，DIV的右侧完全无法访问。

如何解决此问题？

解决问题后，将删除内联样式。

Answer 1

您的问题来自您添加到输入的水平填充。这些被添加到您输入的百分比宽度和百分比边际。

尝试在输入上使用box-sizing: border-box;属性，这样填充不会被添加到指定的宽度和边距

可以找到关于盒子大小的一些解释here