如何设置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和其他浏览器中。

更新：

我在overflow: auto课程中添加了loginTitle，这就是显示的内容：

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

Answer 1

这是因为你的line 5 line-height: 150px; {。}}。

只需删除它就可以了。

Answer 2

如果您希望它看起来像您附加的图片，请参阅此处：http://codepen.io/anon/pen/FothH

HTML：

<form action="#">
  <p>Log in to ###### | Sign up</p>
  <input type="text" placeholder="Username"/>
  <input type="password" placeholder="Password"/>
  <input type="submit" value="Go"/>
  <a href="#">Forgot login/password</a>
</form>  

的CSS：

form {
  border: 1px solid #d4d4d4;
  display: block;
  width: 375px;
  font: 16px sans-serif;
  padding: 0 0 0 15px;
  border-radius: 5px;
  -webkit-font-smoothing: antialiased;

}

form p {
  margin: 5px 0 0;
  font-size: 20px;
  line-height: 35px;

}

input {
  display: inline-block;
    border-radius: 7px;

}

input[type=text], input[type=password] {
  border: none;
  background: #ebebeb;
  font-size: 16px;
  padding: 6px 10px;
  width: 180px;
}

input[type=password] {
  width: 120px;
}

input[type=submit] {
  font-size: 16px;
  width: 25px;
  padding: 5px 0px;
  background: none;
  color: red;
  border: none;
}

form a {
  display: block;
  line-height: 25px;
  text-align: right;
  margin-right: 30px;
  color: #d4d4d4;
  text-decoration: none;
  margin-bottom: 5px;
}