开发者社区> 问答> 正文

ie7兼容性问题,ul宽度固定后,多余li换行排列不整齐

screenshot
黄色标记处不换行并且排列错位,IE7下如何兼容成上图所示?

代码:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.js"></script>
    <![endif]-->
    <style>
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    ul {
        margin-top: 100px;
        margin-left: 100px;
        width: 417px;
        list-style: none;
    }
    ul li {
        height: 22px;
        line-height: 23px;
        float: left;
    }
    ul li a {
        height: 14px;
        padding-left: 8px;
        padding-right: 8px;
        border-left: 1px solid red;
        color: red;
        text-decoration: none;
        font-size: 12px;
    }
    </style>
</head>
<body>
    <ul class="clearfix">
        <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="#">畅读VIP</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>
</body>
</html>

展开
收起
杨冬芳 2016-06-02 18:44:50 2390 0
1 条回答
写回答
取消 提交回答
  • IT从业
    li { white-space:nowrap; }
    2019-07-17 19:25:31
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载