我找不到如何将框放在中心但将其左对齐。似乎 ul 的宽度不适合内容，并且无法自动设置，只能手动设置。但是我不想手动设置，因为我的内容是动态变化的。因此，我需要将框居中但左对齐，无需手动更改，也无需脚本。
未居中但左对齐:
div {
padding: 20px;
width: 200px;
background-color: green;
text-align: center;
}
ul {
list-style:none;
padding: 0;
margin: 0;
text-align: left;
}
ul li {
width: 40px;
height: 40px;
background-color: wheat;
display: inline-block
}<html>
<head></head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>最佳答案
CSS 网格可以做到。调整 div 大小以查看结果:
div {
padding: 20px;
width: 200px;
border: 1px solid;
overflow: hidden;
resize: horizontal;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
grid-auto-rows: 40px; /* height here */
grid-gap: 4px;
justify-content: center; /* this will do the magic */
}
ul li {
background-color: wheat;
}<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>关于html - 将 ul 内的框放在中心，但将它们左对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65395106/