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

可以使用CSS来实现在盒子里的四个等宽高的无序列表，并且水平排列：

HTML代码：

<div class="box">
  <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代码：

.box {
  display: flex; /* 将盒子设置为 flex 布局 */
}

ul {
  flex: 1; /* 将每个 ul 元素设置为等宽 */
  margin: 0; /* 去掉默认的外边距 */
  padding: 0; /* 去掉默认的内边距 */
  list-style: none; /* 去掉默认的无序列表样式 */
}

通过以上CSS代码，我们设置了盒子使用 flex 布局，然后将每个 ul 元素的 flex 属性设置为 1，使它们等宽，并且去掉了默认的外边距、内边距和无序列表样式。这样，四个 ul 元素就可以水平排列，并且等宽了