假设您有一些样式和标记：

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. 看看这个。