父容器定宽,ul不定宽,li不折行

做水平滚动轮播时的思考。

ul宽度不会被撑开,但scrollwidth会撑开。

<html>
<head>
    <title>test-li不折行</title>
    <meta charset="gbk" />
    <style type="text/css">
        ul{ white-space: nowrap; padding: 0; margin: 0; overflow: auto;}
        li{ width: 900px; height: 200px; background-color: green; display: inline-block;}
    </style>
</head>
<body>
    <div style="width: 900px; height: 200px; margin: 0 auto; overflow: hidden;">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

 


你可能感兴趣的:(父容器定宽,ul不定宽,li不折行)