html如何把3个li在一个盒子里左右平均分为3等分

可以使用flex布局来实现：

HTML代码：

<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 30%;
  height: 50px;
  background-color: #ccc;
}

解释：

首先，给包含ul的容器设置flex布局，并使用justify-content属性设置为space-between，使得ul中的li元素在水平方向上平均分布。

然后，给ul设置flex-basis属性为100%，使得ul元素宽度占据整个容器宽度。

接着，给ul中的li元素设置宽度为30%，使得三个li元素在水平方向上平均分为3等分，并设置高度和背景颜色，便于观察效果。

最后，给ul设置list-style和padding、margin属性为0，去除列表的默认样式和间距