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;
		}
	}
}