html中如何设置在盒子里的四个等宽高的无序列表

可以使用CSS的flex布局实现。

HTML代码：

<div class="container">
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
  </ul>
  <ul>
    <li>List 5</li>
    <li>List 6</li>
    <li>List 7</li>
    <li>List 8</li>
  </ul>
  <ul>
    <li>List 9</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
  </ul>
  <ul>
    <li>List 13</li>
    <li>List 14</li>
    <li>List 15</li>
    <li>List 16</li>
  </ul>
</div>

CSS代码：

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

ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  flex: 1;
  background-color: #ccc;
  text-align: center;
  padding: 10px;
}

解释：

• 容器使用flex布局，并设置justify-content为space-between，让四个ul列表均匀分布。

• 每个ul列表也使用flex布局，并设置flex-direction为column，让li项垂直排列并均匀分布。

• li项使用flex: 1，让每个li项平分ul列表高度，实现等高效果。

• 最后，去除ul列表的默认样式，使其没有缩进和列表符号