为什么ul比里面的内容大？

Question

我有一个div（图像上的白色部分），里面有一个ul（绿色部分），而在ul里面的li（黑色部分）由float组成，问题是我想让ul的宽度为它的内容，但是它在右边添加了一些空白并获取了容器的宽度，为什么会发生这种情况，我该如何解决？

正在发生的事的示例：

应用的CSS基本上是：

.div {
    display:block
}

.ul {
    display: block;
    padding: 0;
    list-style: none;
}

li {
    float: left;
    margin-right: 10px;
}

div::after,
ul::after {
    content: "";
    display: block;
    clear: both;
}

Answer 1

使用float和grid的组合来解决宽度问题。

ul {
  float: left;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
  background-color: green;
}

li {
  float: left;
  margin-right: 10px;
  height: 140px;
  width: 140px;
  background: black;
}

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Read more about CSS Grid