Html 为什么不'；是否使用了所有100%的DIV？

我有以下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>

如果我将

logBtn

保持在10%，它将保持在同一行，但字母几乎被截断：

如果我将百分比增加到12%，而不是在同一行上扩展以填充DIV，则会转到下一行：

由于某些原因，我无法使用父DIV的100%宽度。我在忘记登录/密码链接上使用了

float:right

，这就是它的作用。由于某些原因，DIV的右侧完全无法访问

我如何解决这个问题

---

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

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

尝试使用

框大小：边框框
可以找到一些关于盒子大小的解释
意外添加了它。移除它。谢谢不剪切登录btnLooks很好，您修改了什么？：）我也觉得不错。你在哪个浏览器上看到的？IE10，让我在Chrome上测试一下：/BTW，要使用100%的宽度，输入按钮的宽度应该是20%，而不是12%。
displaginsearch
是问题的原因。它设置了一个与
loginBox
重叠的3%边距权限。3%的填充权限对输入和提交按钮本身没有影响，因为它们不是
显示搜索
的直接子项。将计算
brClear
的宽度，这就是“输入”和“提交”按钮用来依次计算它们的宽度。在计算块宽度时（在默认行为中，由
框大小调整
修改）不考虑填充，这一事实使一切都偏离了，因为现在输入的外部宽度是38%+2%+5px（根据
.styleTB
规则），而不是“干净”38%+2%。另外，
displaginsearch
和
loginBox
重叠的唯一原因是
loginBox
具有100%的宽度和边框以及左侧填充。（使用
框大小：border box；
属性也可以解决这个问题。我告诉你，这个属性就像魔法一样，应该被更多地使用。罪魁祸首是
登录框a
的另一段代码，它有一个
右边距：30px
，现在我删除了它，一切都很好！！！呸！谢谢帮助：）
.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);
}