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>

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

Answer 1

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

要避免包装，请将white-space:nowrap;添加到DIV：

#exposoures { white-space:nowrap; }

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

x滚动条的CSS问题

1 个答案: