假设你有一些样式和标记:
ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
当你看到这个。<ul>在底部有一个滚动条,尽管我已经为溢出x/y指定了可见和隐藏值。
(Chrome 11和opera (?))
我猜一定有一些w3c规范或什么东西告诉这发生了,但对于我的生活,我不明白为什么。
JSFiddle
更新:-我找到了一种方法,通过添加另一个元素包裹在ul实现相同的结果。来看看。