现代方法[-Flexbox](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Flexible_boxes)！
现在CSS3 flexbox具有更好的浏览器支持，我们中的一些人终于可以开始使用它们了。只需添加其他供应商前缀即可获得更多浏览器覆盖。
在这种情况下，您只需将父元素设置
display为
flex，然后将该
justify-content属性更改为
space-between或
space-around，以便在子级flexbox项之间或周围添加空间。
使用justify-content: space-between
- （
此处为示例） ：
ul { list-style: none; padding: 0; margin: 0;}.menu { display: flex; justify-content: space-between;}<ul > <li>Item One</li> <li>Item Two</li> <li>Item Three Longer</li> <li>Item Four</li></ul>使用justify-content: space-around
-
（此处为示例） ：
ul { list-style: none; padding: 0; margin: 0;}.menu { display: flex; justify-content: space-around;}<ul > <li>Item One</li> <li>Item Two</li> <li>Item Three Longer</li> <li>Item Four</li></ul>
