Question

我有一个名为footerWrap的div，它包含3个无序列表。我向左浮动，所有无序列表。

我的目的是根据无序列表的高度使footerWrap高度增长。但是......在所有浏览器中（exept IE6），无序列表会传递div ...就像他们有z-index属性一样！

我试图在最后放置一个div，清楚：all，我也尝试在div上创建float：none＃footerWrap

这是我的Doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这是我的完整CSS代码：

div#footerWrap
{
    height:180px;
    background-color:#5c5c5c;
    background-image:url('../../img/bgFooter.png');
    background-repeat:repeat-x;
    background-position:top;
    padding-top:20px;
    padding-left:15px;
    margin-top:20px;
}



    /* menus footer */
    div#footerWrap ul#mainMenu,
    div#footerWrap ul#myMenu,
    div#footerWrap ul#othersMenu
    {width:180px; float:left;}

        div#footerWrap ul#mainMenu li a,
        div#footerWrap ul#myMenu li a,
        div#footerWrap ul#othersMenu li a 
        {
            color:#dadada;
            text-decoration:none;
            padding:5px;
        }

            div#footerWrap ul#mainMenu li a,
            div#footerWrap ul#othersMenu li a
            {padding:5px 10px;}

            /* hover */
            div#footerWrap ul#mainMenu li a:hover,
            div#footerWrap ul#othersMenu li a:hover
            {color:#fff; background-color:#666;}


    /* menu principal */
    div#footerWrap ul#mainMenu {margin-top:-10px;}

        div#footerWrap ul#mainMenu li{line-height:24px;}       

        /* /menu principal */



        /* o meu menu*/
        div#footerWrap ul#myMenu {margin-left:15px;}

            div#footerWrap ul#myMenu li {color:#fff; line-height:22px;}

                    div#footerWrap ul#myMenu li.myMenuItem a 
                    {
                        background-image:url('../../img/smallArrow.gif');
                        background-repeat:no-repeat;
                        background-position:left 7px;
                        padding-left:15px;
                        padding-right:20px;
                    }

                        div#footerWrap ul#myMenu li.myMenuItem a:hover
                        {color:#fff; background-color:#666;}                
        /* /o meu menu */



        /* outros menu */
        div#footerWrap ul#othersMenu {margin-left:300px; width:340px;}

            div#footerWrap ul#othersMenu li 
            {
                color:#fff;
                line-height:22px;
            }

                div#footerWrap ul#othersMenu li a{margin-left:5px;}
                div#footerWrap ul#othersMenu li a span {margin-left:-5px;}

        /* /outros menu */

这是我的XHTML代码：

       <div id="footerWrap">

            <!-- menu principal -->
            <ul id="mainMenu">
                <li><a href="#">item</a></li>
            </ul>


            <!-- o meu menu -->
            <ul id="myMenu">
                <li>meu menu</li>
                <li class="myMenuItem slideMenuItem"><a href="#">item</a></li>
            </ul>


            <!-- outros menu -->
            <ul id="othersMenu">
                <li><span>outros</span></li>
                <li><a href="#">item</a></li>
            </ul>

        </div>

Answer 1

您height: 180px;上不需要#footerWrap。浮动3 ul左侧是好的，但你需要清除它们。

将.clear {clear:both;}添加到您的CSS中。在关闭<div class="clear"></div> div之前添加#footerWrap。

您也可以尝试将position: relative;添加到#footerWrap并将div#footerWrap ul {display: block;}添加到您的CSS中。

Answer 2

为什么不尝试保证金：

div#footerWrap ul#mainMenu {margin-left:0}
div#footerWrap ul#myMenu {margin-left:200px}
div#footerWrap ul#othersMenu {margin-left:200px}

实际上180似乎已经足够了，但渲染还包括填充，所以你需要一个大于180的数字

浮动和高度

2 个答案: