css 一行显示四个元素

这里介绍两种方式

1. 子元素宽度设置 23%（可以根据UI自己调整）
   右边距设置 （ 100% - 23% * 4 ）/ 4, 即 8% / 3。
   每一行最后一个元素 不设置右边距。

<ul><li v-for="(val, ind) in item.list" :key="val.name"><p>{{ val.name }}p>li>ul>

ul {display: flex;flex-wrap: wrap;justify-content: flex-start;padding: 10px 0;li {margin-top: 10px;margin-bottom: 10px;width: 23%;height: 80px;&:not(:nth-child(4n)) {/*计算出三个间距大小，平分即可*/margin-right: calc(8%/ 3);}}
}

2 . 跟第一种方法同理。
设置固定右边距 10px
动态计算每个元素的宽度 ( 100% - 30px ) / 4

ul {display: flex;flex-wrap: wrap;justify-content: flex-start;padding: 10px 0;li {margin-top: 10px;margin-bottom: 10px;width: calc((100% - 60px) / 4);height: 80px;&:not(:nth-child(4n)) {/*计算出三个间距大小，平分即可*/margin-right: 20px;}}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！