Question

我知道你们每个人都看过的最简单的问题，但是我真的不能在我的CSS中找到什么错误。我试图在页脚div中浮动两个div。但问题是第一个div（#copyrights）只是卡在中间。看起来主容器（#footer）有问题。因为当我把最后一个容器放在它外面时，一切都很好用

查看my code on jsfiddle。

继承我的HTML（页脚div位于底部）：

<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
    <!--Footer Navigation Links -->
    <ul>
        <li>
            <a href="#Home">Home</a>
        </li>
        <li>
            <a href="#About">About Us</a>
        </li>
        <li>
            <a href="#Mall">The Mall</a>
        </li>
        <li>
            <a href="#">Media Center</a>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
    </ul>
    <!-- End od Footer nav links -->
    <!--Start of newsletter div -->
    <div id="newsletter">
        <span>SignUp To Get The Latest News &amp; Updates</span>
        <form>
            <input class="rounded" type="text" value="Your Email Here..." >
            <input class="rounded-button" value="SUBSCRIBE" type="button" >
        </form>
    </div>
    <!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer"> 
<div id="copyrights">
    2013 Boulevar Mall. All rights reserved.
    </div>
    <div id="social">Follow us </div>
</div>
<!--End of lower footer -->

这是我的css：

    @import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer 
{ 
    height:100px; 
    font-family: 'Droid Sans', sans-serif; 
    text-transform:capitalize; 
    font-size:14px;
}
/*css for upper footer */
#upper-footer 
{
    height:70%; 
    background-color:#efe7e1;
}
#upper-footer #newsletter 
{
    float:right;
    height: 100%;
    display: table;
}


#upper-footer ul 
{
    list-style:none;
    margin-top: 0px; 
    float:left;
    width:480px;
}
#upper-footer ul li 
{
    display:inline-block;
    height: 100%;
    border-left: 1px solid d7cfca; 
}
#upper-footer ul li:nth-child(1) 
{
    border-left:none;
}
#upper-footer ul li a 
{ 
    line-height:200%; 
    text-decoration:none; 
    color:#9b907c; 
    display:block; 
    line-height:70px; 
    padding-left:15px; 
    padding-right:15px; 
    width: 100%; 
}
#upper-footer #newsletter span
{
    color:#726753;
    width:150px;
    display: table-cell;
    vertical-align: middle;
}

#upper-footer #newsletter form
{
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
}
/*for rounded text box */
input.rounded 
{
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 9.42px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;
    height:26px;
    width:163px;
    text-align:center;
}

/*for rounded button */
input.rounded-button 
{
    border: 1px solid #ccc;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    font-size: 9.42px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;
    height:29px;
    width:80px;
    background-color:#726753;
    color: white;
    font-weight: bold;
}
input.rounded-button:hover 
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}

/*css for lower footer */
#lower-footer 
{
    background-color:#726753; 
    height:30%; 
    color:white;
}
#lower-footer #copyrights 
{
    float:left;
}
#lower-footer #social 
{
    float:right;
}

你可以自由地指出我的错误，因为我对这个东西很新:) 提前谢谢！

Answer 1

#upper-footer ul上的余量不会让你的#copyrights浮动到最左边。尝试使用以下

替换#upper-footer ul规则

#upper-footer ul 
{
    list-style:none;
    margin: 0; 
    float:left;
    width:480px;
}

它将#upper-footer ul的所有边距设置为零，而不是仅设置margin-top。

更新

由于margin元素的#upper-footer ul 溢出在其父级#upper-footer之外，为overflow: hidden设置#upper-footer也会这样做。

为什么div在中心

1 个答案:

更新