html - x 滚动条的 CSS 问题

Question

CSS:

#exposoures ul{padding:0px;margin:0px;float:left;}

HTML:

<div id="exposoures" style="width: 100px;height:50px; overflow-x:scroll;overflow-y:hidden;  background-color: #ccc;">
    <ul>
        <li>row 1 col 1</li>
        <li>row 2 col 1</li>
        <li>row 3 col 1</li>
    </ul>
    <ul>
        <li>row 1 col 1</li>
        <li>row 2 col 1</li>
        <li>row 3 col 1</li>
    </ul>
    <ul>
        <li>row 1 col 1</li>
        <li>row 2 col 1</li>
        <li>row 3 col 1</li>
    </ul>
    <ul>
        <li>row 1 col 1</li>
        <li>row 2 col 1</li>
        <li>row 3 col 1</li>
    </ul>
</div>

这里我上面的 div 包含多个 ul，现在 overflow-x:scroll 出现问题。我无法获得 x-axis 的滚动条。任何人都可以帮助我解决这个问题

Answer 1

这是因为单词是换行的，所以当它达到宽度限制时，它只是流到下一行，由于 overflow-y: hidden 规则，它被隐藏了。

要避免换行，请将 white-space:nowrap; 添加到 DIV:

#exposoures { white-space:nowrap; }

实例:http://jsfiddle.net/PqR5x/1/