HTML中如何使用Flexbox创建等宽等高无序列表

可以使用 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 列表的默认样式，使其没有缩进和列表符号。