如何包装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;

这两个作品。