css+div浏览器兼容问题， div和其中的ul位置上冲突。ul设置margin-left, float:left，间距出错。
代码如下：
无标题文档
body {margin: 0px;}
#aa{ margin:0; padding:0; width:668px; border:1px dashed #FF9900;}
#aa ul{ margin:12px; padding-left:21px; width:250px; border:1px solid #FF00FF;}
#aa ul li{ margin:0; padding:0; font:12px/22px arial; color:#999; border:1px dashed #33CC00;}
#aa ul span{margin:0; padding:0; font:12px/22px "宋体"; color:#333; border:1px dashed #33CC00;}
-->
aaa
101
102
103
bbb
201
202
203
ie6.0预览效果如下：
ie7.0预览效果如下：
ie8.0预览效果如下：
（这个是我要的效果）
如果清楚ul的浮动，magin的显示就正常了，如图：
但是ul换行了，怎么办？（每个ul是一块内容，要排成每行2列。）
我试过用dl、dt、dd来做，还是同样的bug！
解决问题者加分，在线等！
float:left ul li所表示的区域，该元素显示在左边。（浮动） #div ul {margin:5px}指的是 全部的
温馨提示：内容为网友见解，仅供参考
第1个回答 2011-05-06
gei 给浮动的层 加上一句 display:inline;
浮动后 记得写一个层 清除浮动 懂？ clear:both;
浮动后 记得写一个层 清除浮动 懂？ clear:both;
第2个回答 推荐于2016-07-13
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,div,ul,li{margin:0;padding:0;}/*重置所有能用到的标签*/
#aa{width:668px;height:125px;padding:10px;/*指定宽、高和间距*/border:1px dashed #FF9900;}
#aa ul{list-style:none;/*去掉默认样式的点*/float:left;/*左浮动，解决同行显示*/display:inline;/*解决IE6中双倍浮动的问题*/margin:12px;padding-left:21px;width:250px;border:1px solid #FF00FF;}
#aa ul li{font:12px/22px arial;color:#999;border:1px dashed #33CC00;}
#aa ul li.t{font:12px/22px "宋体";font-weight:bold;color:#333;border:1px dashed #33CC00;}/*ul元素中不适合套span元素，故改成一个li元素，且设成一个单独的类*/
-->
</style></head>
<body>
<div id="aa">
<ul>
<li class="t">aaa</li>
<li>101</li>
<li>102</li>
<li>103</li>
</ul>
<ul>
<li class="t">bbb</li>
<li>201</li>
<li>202</li>
<li>203</li>
</ul>
</div>
</body>
</html>本回答被提问者采纳
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body,div,ul,li{margin:0;padding:0;}/*重置所有能用到的标签*/
#aa{width:668px;height:125px;padding:10px;/*指定宽、高和间距*/border:1px dashed #FF9900;}
#aa ul{list-style:none;/*去掉默认样式的点*/float:left;/*左浮动，解决同行显示*/display:inline;/*解决IE6中双倍浮动的问题*/margin:12px;padding-left:21px;width:250px;border:1px solid #FF00FF;}
#aa ul li{font:12px/22px arial;color:#999;border:1px dashed #33CC00;}
#aa ul li.t{font:12px/22px "宋体";font-weight:bold;color:#333;border:1px dashed #33CC00;}/*ul元素中不适合套span元素，故改成一个li元素，且设成一个单独的类*/
-->
</style></head>
<body>
<div id="aa">
<ul>
<li class="t">aaa</li>
<li>101</li>
<li>102</li>
<li>103</li>
</ul>
<ul>
<li class="t">bbb</li>
<li>201</li>
<li>202</li>
<li>203</li>
</ul>
</div>
</body>
</html>本回答被提问者采纳
相似回答
