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

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-block;

两者都有效。