css - 如何包装 UL 列表 - 使用 css 换行的 LI

Question

在下面的图像中，列表将离开屏幕。我需要阻止ul的宽度。应用了宽度，但超出了 ul 宽度。当前使用的 CSS：

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

Answer 1

试试这个

.menu li {
    display: inline-block;
}

体面的支持，这是一个很好的总结。

如果有一个

• margin-left尽量不要将宽度设置为100%，而是100% - margin-left-value
• padding-left采用box-sizing: border-box

如果你不需要支持旧的浏览器或者可以加载一个 polyfill，那么 flexbox 模型就可以完成这项工作。

Answer 2

显示：内联；或显示：内联块；

两者都有效。