获取内联列表项以溢出父级ul

Question

我有一个菜单，作为列表与内联项目。 在大屏幕上正确呈现时，当浏览器窗口变小时，元素会在菜单下移动，而不是将它们放在其余内容的右侧。

min-width:100%; 对于.drop_menu我原本期望菜单至少是屏幕宽度的100％，但如果需要，可以伸展以适应x方向的更多菜单项。

width:500px; .drop_menu它的工作原理，但我不想给菜单一个固定的宽度。

我希望项目在x方向上溢出的原因是因为我要实现一个javascript卷轴，所以当鼠标光标靠近边缘时菜单会滚动。 如果没有x溢出，我无法在x方向滚动。

我在这里创建了一个失败菜单的jsfiddle： http ： //jsfiddle.net/j41jfjqL/3/

Answer 1

由于它们是内联的，因此请使用white-space:nowrap来防止列表项出现在新行上。

.drop_menu {
    white-space:nowrap;
}
.drop_menu > li {
    white-space:normal;
}

由于您不希望在子li元素上发生这种情况，因此请将white-space属性值设置为normal 。