如何用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% - margin-left-value
• padding-left 使用 box-sizing: border-box

如果您不必支持旧版浏览器或者无法加载polyfill,那么flexbox模型就可以完成这项工作.