0

我知道这是您见过的最简单的问题，但实际上我无法在我的 css 中找到问题所在。我正在尝试在页脚 div 中浮动两个 div。但问题是第一个 div (#copyrights) 只是卡在中间。主容器 (#footer) 似乎有问题。因为当我将最后一个容器放在外面时，一切都很好

看看我在 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;
}

您可以随意指出我的错误，因为我对这些东西很陌生 :) 在此先感谢！

4

1 回答 1

3

#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溢出其父元素，设置for也可以解决问题。#upper-footer ul#upper-footeroverflow: hidden#upper-footer

于 2013-04-13T20:05:20.133 回答