当前位置：首页 → 问答吧 → 一个ul浮动的问题让我很郁闷

一个ul浮动的问题让我很郁闷

时间：2010-12-21

来源：互联网

大家都知道通过元素的浮动可以方便的使用父元素自适应子元素的问题，但有一个很奇怪的问题就是ul浮动后如果设置li的margin值，但margin-bottom会失效，IE6、IE7有这个bug，IE8已经解决，其他的FF,Chrome都很正常，不知可有解决的方法，如果不是ul元素，是div的浮动的话，后面加个清除就可以解决。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } #wrap { float:left; border:1px solid red; padding:10px; } ul { float:left; list-style:none; border:1px solid green; background-color:#ccc; zoom:1; } ul li { float:left; width:100px; height:100px; border:1px solid blue; display:inline; margin:10px; } </style> </head> <body> <div id="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div style="clear:both"></div> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 happyqian 于 2010-12-21 21:24 编辑 ]

作者: happyqian 发布时间: 2010-12-21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } #wrap { float:left; border:1px solid red; padding:10px; } ul { float:left; list-style:none; border:1px solid green; background-color:#ccc; } ul li { width:100px; height:100px; border:1px solid blue; display:inline-block; margin:10px; *display:inline; zoom:1; } </style> </head> <body> <div id="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: HeTingYi 发布时间: 2010-12-21

一个ul浮动的问题让我很郁闷

热门阅读

热门下载