獲取內聯列表項以溢出父級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 。