获取内联列表项以溢出父级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来阻止列表项出现在新行上。

Updated Example

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

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