gpt4 book ai didi

css - float 和高度

转载 作者:太空宇宙 更新时间:2023-11-04 14:24:53 26 4
gpt4 key购买 nike

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

我的意图是让 footerWrap 的高度根据无序列表的高度增长。但是...在所有浏览器(IE6 除外)中,无序列表都会传递 div...就像它们具有 z-index 属性一样!

我试图在最后放置一个 div,带有 clear:all,我还尝试在 div 上设置 float:none#footerWrap

这是我的文档类型:

<!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>

最佳答案

你不需要height: 180px;#footerWrap .将 3 个 ul 向左浮动很好,但您需要清除它们。

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

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

关于css - float 和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1589837/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com