假设你有一些风格和标记:
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规范或者某些东西告诉这件事发生但是对于我的生活我无法理解为什么.
更新: -我找到了一种方法来通过添加另一个元素来实现相同的结果ul.看看这个.
我试图允许y轴溢出,同时隐藏x轴上的溢出.有人可能会期望添加这些属性:
.overflow {
overflow-x: hidden;
overflow-y: visible;
}
块级元素就足够了,但是由于这里记录的一些CSS实现怪癖,这实际上并不起作用.最终发生的事情是overflow-y的计算值变为auto,而overflow-x保持隐藏状态.
有没有其他方法可以实现我想要的行为？
只是为了更详细一点,我有一个水平的项目列表,我正在使用自定义按钮滚动.列表的包含元素的宽度远低于列表的宽度.我不希望出现滚动条,因为我使用自己的自定义按钮来浏览列表,因此我需要隐藏overflow-x.在悬停时,我想应用一个变换来扩大元素的大小,但我希望元素能够溢出包含元素的顶部和底部之外,因此需要overflow-y可见.