浮动不会将元素彼此对齐

Question

直播临时链接：http://www.tajrediat.com/test/

快照：

红色名称代表类。

我希望我的表单位于白框内/内。我可以使用margin-right和margin-top将它放入框中，但是有一种实用的方法可以通过社交媒体部分浮动表单吗？

HTML：

<div class="container">
        <header>
            <div class="logo">
            </div>
            <nav>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </nav>

            <div class="mainbanner">

            </div>
            <div class="loginbox">
                <form>
                    <ul>
                        <li>
                            <label>Username</label>
                            <input type="text"/>
                        </li>
                        <li>
                            <label>Password</label>
                            <input type="password"/>
                        </li>
                        <li>
                            <input type="checkbox"/>
                            <label>Remember me?</label>
                        </li>
                        <li>
                            <input type="submit" value="Login"/>
                        </li>
                    </ul>
                </form>
            </div>
            <div class"socialmedia">
                <!-- tweeter-->
                <!-- facebook -->
                <!-- googleplus -->
            </div>
        </header> 
    </div>

CSS：

.container {
    width: 980px;
    margin: 0 auto;
}

.logo {
    float: right;   
}

nav {
    float: right;   
}

nav ul li {
    display: inline;
    padding-right: 13px;    
}

.mainbanner {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}

.socialmedia {

}

.loginbox {
    height: 182px;
    background: url(../images/loginbox.png) no-repeat;
}

.loginbox form {
width: 100px;
}

.loginbox form ul{

}

如果我从.loginbox表单中移除宽度，表单会变得凌乱：

知道如何通过白框在上面的部分旁边浮动表单吗？

Answer 1

你需要为loginbox div和socialmedia提供宽度，比如50％，否则它将占用100％的宽度。 还要确保清除浮动

你的CSS应该是下面的

.loginbox, .socialmedia
{
    float:left;
    width:50%;
}
.clear
{
     clear:both
}

将一个兄弟div添加到loginbox和socialmedia div并将“clear”css类添加到这个新div

Answer 2

你需要添加float：right;到.loginbox（如果你想要它旁边的其他）并给它一个小于剩余空间的宽度。添加一个明确的新div：both;低于那个。