CSS控制一行显示两个li

时间:2024-03-05 13:02:49

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	ul {
		width: 300px;
	}
	li {
		width: 150px;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	label {
		margin-right: 10px;
	}

</style>
<body>
	<ul class="a">
		<li class="b"><label>你好</label><p>111</p></li>
		<li class="b"><label>你好1</label><p>111</p></li>
		<li class="b"><label>你好</label><p>111</p></li>
		<li class="b"><label>你好2</label><p>111</p></li>
		<li class="b"><label>你好</label><p>111</p></li>
		<li class="b"><label>你好3</label><p>111</p></li>
	</ul>
</body>
</html>