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

ie11:

ie7:

黄色标记处不换行并且排列错位，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>

cssli { white-space:nowrap; }

ul{
    white-space:nowrap;
}

【热门文章】