如何包裝UL列表 - 使用css的新行上的LI

Question

這裏在下面的圖片中，列表將出現在屏幕之外。我需要阻止ul的寬度。應用寬度，但超出ul寬度。 當前CSS使用：

.menu ul{ 
width:100%; 
max-width:100%; 
} 

Answer 1

試試這個

.menu li { 
    display: inline-block; 
} 

Decent support，這裏是一個不錯的round up。

如果有一個

• margin-left儘量不要設置寬度爲100%，而是100% - margin-left-value
• padding-left使用box-sizing: border-box

如果你沒有支持舊的瀏覽器或者是罰款與加載polyfill，flexbox模型將做這項工作。

Answer 2

display：inline; 或 display：inline-block;

這兩個作品。