实现两个ul的li元素逐行上下对齐，超长li换行且内部不折行

要实现你描述的需求——让第二个<ul>的每个<li>恰好位于第一个<ul>对应<li>的正下方，同时保证<li>内部文本不折行、多余项自动换行——可以用CSS Grid来完美解决，下面是具体实现：

HTML 结构 #

<div class="aligned-container">
  <ul class="list-top">
    <li>短文本项</li>
    <li>这是一段较长的测试文本不会折行</li>
    <li>普通长度的列表项</li>
    <li>第四个需要换行的项目</li>
    <li>第五个额外项目</li>
  </ul>
  <ul class="list-bottom">
    <li>对应短文本</li>
    <li>对应较长的测试文本不会折行</li>
    <li>对应普通长度项</li>
    <li>对应第四个换行项目</li>
    <li>对应第五个额外项目</li>
  </ul>
</div>

CSS 样式 #

/* 外层容器：用Grid实现列对齐 */
.aligned-container {
  display: grid;
  /* 自动根据容器宽度生成列，列宽由该列最宽的内容决定 */
  grid-template-columns: repeat(auto-fill, max-content);
  /* 可选：设置列与列、行与行之间的间距 */
  gap: 12px 15px;
  padding: 10px;
}

/* 让列表本身不占据布局空间，直接将子项交给Grid容器管理 */
.aligned-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: contents;
}

/* 列表项样式：保证内部文本不折行 */
.aligned-container li {
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid #eee; /* 可选：用于直观查看对齐效果 */
  background-color: #f9f9f9;
}

方案原理 #

1. Grid 列自适应：grid-template-columns: repeat(auto-fill, max-content) 会让每一列的宽度由该列中最宽的<li>内容决定，这样两个列表的对应项自然会精确对齐。
2. display: contents 穿透布局：给<ul>设置这个属性后，列表本身不再作为独立的布局容器，它的所有<li>子元素会直接成为外层Grid容器的子项，第一个<ul>的<li>会填满第一行（超出容器宽度自动换行），第二个<ul>的<li>会紧接着填充下一行，完美实现上下对应。
3. white-space: nowrap 保证内部不折行：这个属性保留了你原本的需求，确保单个<li>内的文本不会换行。

兼容说明 #

如果需要兼容较老的浏览器（如IE），可以改用Flexbox结合固定宽度的方式：给每个<li>设置一个固定的min-width，同时让两个<ul>都使用display: flex; flex-wrap: wrap;，并保证两个列表的<li>宽度一致。不过这种方式灵活性不如Grid，因为需要手动预估内容宽度。

内容的提问来源于stack exchange，提问作者fahad shaikh