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

I have the following HTML code:

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

If I keep the logBtn at 10% it stays in the same line but the letter gets cut off almost:

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

If I increase the percentage to 12%, instead of expanding on the same line to fill up the DIV, it goes to the next line:

如果我将百分比增加到12%,而不是在同一行上扩展来填充DIV,它会转到下一行:

For some reason I am not able to use the 100% of the width from the parent DIV. I used float: right on the forgot login/password link and that's how far it goes. For some reason the right side of the DIV is completely not accessible.

由于某种原因,我无法使用父DIV的100%宽度。我使用浮动:正确的忘记登录/密码链接,这是多远。出于某种原因,DIV的右侧完全无法访问。

How do I resolve the issue?

我该如何解决这个问题?

The inline style will be removed when I have resolved the issue.

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

1 个解决方案

#1

Your problem comes from the horizontal paddings you are adding onto the inputs. Those are added to the percentage width and percentage margin you have put on the inputs.

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

try using the box-sizing: border-box; property on the inputs so the paddings won't get added to the specified width and margins

尝试使用box-sizing:border-box;输入上的属性,因此填充不会添加到指定的宽度和边距

Some explaination about box-sizing can be found here

关于盒子尺寸的一些解释可以在这里找到