html如何把一个盒子三等分并且使3个li在中间那个盒子里左右平均分为3等分

可以使用flex布局实现这个效果。

首先，我们需要一个包含3个盒子的父容器，设置它为flex布局，并且让它的子元素平均分配宽度。

然后，我们需要让中间的盒子再次使用flex布局，并且让它的子元素平均分配宽度。

最后，我们可以使用text-align属性来让中间的盒子里的li元素左右对齐。

具体代码如下：

<div class="container">
  <div class="box"></div>
  <div class="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="box"></div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .box {
    width: 33.33%;
    display: flex;
    justify-content: center;
  }
  ul {
    display: flex;
    justify-content: space-between;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    width: 33.33%;
    height: 50px;
    background-color: #ccc;
  }
</style>
``