浮动不使元素彼此对齐 [英] Float does not Align Elements beside Each Other

问题描述

实时临时链接: 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>用户名</label>< input type ="text"/></li>< li>< label>密码</label>< input type ="password"/></li>< li>< input type ="checkbox"/>< label>还记得我吗?</label></li>< li><输入type ="submit" value =登录"/></li></ul></form></div>< div类"socialmedia"><！-高音扬声器-><！-facebook-><！-googleplus-></div></header></div> 

CSS:

  .container {宽度:980px；保证金:0自动;}.商标 {浮动:正确；}导航{浮动:正确；}nav ul li {显示:内联；padding-right:13像素；}.mainbanner {浮动:正确；边距顶部:10像素;右边距:20px；}.社交媒体 {}.loginbox {高度:182px；背景:url(../images/loginbox.png)不重复；}.loginbox表单{宽度:100px；}.loginbox形式ul {} 

如果我从.loginbox表单中删除宽度，则表单从以下日期开始会变得混乱:

您知道在白色框旁边如何在上面的部分旁边浮动表格吗?

解决方案

您需要为loginbox div和socialmedia提供宽度，例如50％，否则宽度将为100％.还要确保清除浮标

您的CSS应该如下所示

  .loginbox，.socialmedia{向左飘浮;宽度:50％;}.清除{清除:两者} 

将一个同级div添加到loginbox和socialmedia div，并将清除" css类添加到此新div

Live Temporary Link: http://www.tajrediat.com/test/

Snapshot:

Red colored names represent classes.

I want my form to be by/within the white box. I could use margin-right and margin-top to get it into the box, but is there a practical way to float the form by the socialmedia section?

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{

}

If i remove the width out of .loginbox form, the form gets messy as of:

Any idea how float the form beside the above section, by the white box?

解决方案

You need to give width to loginbox div and socialmedia, say something like 50%, otherwise it is going to take 100% width. Also make sure that you clear floats

Your CSS should be something like below

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

Add a sibling div to loginbox and socialmedia divs and add the "clear" css class to this new div

这篇关于浮动不使元素彼此对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！