html - 在包含在形状中的列表项之间添加水平空间

Question

我制作了一个列表，其中的文本包含在一个圆圈中。问题是圆圈在水平方向上相互碰撞，我希望它们之间有一些空间。我试过弄乱填充和边距，但没有成功。

.oval {
  width: 120px;
  height: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>

Answer 1

flex 盒解决方案...

ul {
  display: flex;
  /* change this value as you need */
  width: 500px; 
  justify-content: space-between;
}

.oval {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 100px;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>