发新话题
打印

li自适应无效的解决办法

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 编辑 ]
发新话题