假设你有一些风格和标记:
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.看看这个.
我的问题是，当我定义 时overflow-x:hidden，它会创建一个不需要的滚动条。
我正在努力实现与这个问题类似的目标。
我已经尝试了那里建议的解决方案，但没有成功。下面是我的代码：
CSS 和 HTML：
.wrapper {
margin-top: 50px;
}
.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: 30px;
overflow-x: hidden;
}
.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
}
.menu_list {
width: 300px;
}<body>
<div class="wrapper">
<div class="menu_container">
<div class="menu_list" align="left">
Menu 1 Menu2 Menu 3
</div>
<div class="submenu">
sub
</div>
</div>
</div>
</body>这是JSFiddle链接。