如何用css包裝UL列表 - LIs在新行上

Question

在下面的圖像中，列表將離開屏幕。 我需要阻止ul的寬度。 應用寬度但超出ul寬度。 使用的當前CSS：

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

Answer 1

嘗試這個

.menu li {
    display: inline-block;
}

體面的支持 ，這是一個很好的回合 。

如果有的話

• margin-left盡量不將寬度設置為100% ，而是將100%設置為100% - margin-left-value
• padding-left使用box-sizing: border-box

如果您不必支持舊版瀏覽器或者無法加載polyfill，那么flexbox模型就可以完成這項工作。

Answer 2

顯示：內聯; 或顯示：inline-block;

兩者都有效。