html - 为什么没有使用所有 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; 属性，这样填充就不会添加到指定的宽度和边距

可以找到关于 box-sizing 的一些解释 here