标题: li自适应无效的解决办法 [打印本页]
作者: ywz_bitscn 时间: 2011-9-16 11:30 标题: li自适应无效的解决办法
因为需要LI只能做自适应宽度，所以最后一个LI在IE浏览器下总是不能切换到下一行，在Firefox下却可以。请达人指点迷津！谢谢复制内容到剪贴板
代码:
<!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 {}
.catalogs{
width:925px;
border:2px solid #A7C9ED;
overflow: hidden;
padding: 6px 8px;
background-color: #fff;
margin-top: 8px;
margin-right: auto;
margin-bottom: 8px;
margin-left: auto;
}
.catalogs h2{ width:950px; line-height:33px; height:33px; font-size:12px; text-align:left;}
.catalogs ul{width:940px;margin:0;}
.catalogs ul li{ float:left; text-align:left; color:#999; line-height:36px; height:36px; overflow:hidden;white-space:nowrap;}
.catalogs ul li a{
color:#1949A6;
border: 2px solid #fff;
padding: 6px 12px;
font-size: 14px;
margin-right: 2px;
}
.catalogs ul li a:hover{color:#f63;text-decoration: none;border: 2px solid #f60;}
-->
</style>
</head>
<body>
<div class="catalogs">
<ul>
<li><a href="">女装</a></li>
<li><a href="">男装</a></li>
<li><a href="">女鞋</a></li>
<li><a href="">男鞋</a></li>
<li><a href="">女包</a></li>
<li><a href="">男包</a></li>
<li><a href="">内衣</a></li>
<li><a href="">运动</a></li>
<li><a href="">护肤品</a></li>
<li><a href="">首饰</a></li>
<li><a href="">手机</a></li>
<li><a href="">电脑</a></li>
<li><a href="">手表</a></li>
<li><a href="">家电</a></li>
<li><a href="">日用</a></li>
<li><a href="">家纺</a></li>
<li><a href="">家具</a></li>
<li><a href="">美食</a></li>
<li><a href="">母婴</a></li>
<li><a href="">图书</a></li>
</ul>
</div>
</body>
</html>[ 本帖最后由 ywz_bitscn 于 2011-9-16 11:38 编辑 ]
| 欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/) |
Powered by Discuz! 6.1.0 |