html - 如何设置 DIV 样式以显示 html 控件

Question

我有以下 HTML:

<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
    <div class="theLoginBox" style="clear: both;">
        <div class="loginTitle">
            Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
            <br />
            <input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
            <br />
            <span style="float: right;">Forgot login/password</span>
        </div>
    </div>
    <div style="z-index: 99999999999;">
        <input type="text" value="Search WD" />
    </div>
</div> <!-- LOGIN AND SEARCH -->

CSS:

.dispLoginSearch
{
    width: 47%;
    height: 150px;
    line-height: 150px;
    vertical-align: middle;
    float: right;
    padding-right: 2%;
    background: #FFFFFF;
    border: 1px solid #0026ff;
}
.theLoginBox
{
    border: 2px solid #D5D5D5;
    border-radius: 4px;
    width: 97%;
    height: 90px;
    padding: 10px;
    white-space: nowrap;
    background: #ff6a00;
}
.loginTitle
{
    height: 88px;
    display: block;
    vertical-align: top;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
    background: #b6ff00;
}

当我查看该网站时，我看到以下内容:

我希望它显示什么:

我该如何解决这个问题？它发生在 IE 和其他浏览器中。

更新:

我在 loginTitle 类中添加了 overflow: auto，如下所示:

每个部分都占用了大量空间并显示滚动条:/

Answer 1

这是因为您的 CSS 第 5 行:line-height: 150px;。

只需删除它，您应该没问题。