如何利用ul、li元素实现多列对齐、列间距固定的无序列表布局

实现方案 #

方案1：微调HTML结构（推荐，兼容性好、语义更清晰） #

将成对的普通条目和ck-item放在同一个<li>内，用标签区分两部分内容：

<ul class="two-col-ul">
  <li><span class="item-main">item 1</span></li>
  <li>
    <span class="item-main">item 2</span>
    <span class="item-ck">ck-item 2</span>
  </li>
  <li><span class="item-main">item 3</span></li>
  <li>
    <span class="item-main">item 4</span>
    <span class="item-ck">ck-item 4</span>
  </li>
  <li>
    <span class="item-main">item 5</span>
    <span class="item-ck">ck-item 5</span>
  </li>
</ul>

对应CSS配置：

.two-col-ul {
  list-style: none;
  padding-left: 0;
  /* 可按需调整列表整体边距 */
}
.two-col-ul li {
  display: grid;
  /* 第一列自适应占满剩余空间，第二列按内容宽度适配 */
  grid-template-columns: minmax(0, 1fr) auto;
  /* 两列固定间距，可自行调整数值 */
  column-gap: 24px;
  margin: 4px 0;
}
/* 仅存在单条内容的li自动跨两列显示 */
.two-col-ul li .item-main:only-of-type {
  grid-column: 1 / -1;
}

方案2：完全保留原有HTML结构 #

需要给所有ck-item的<li>添加ck-item类名：

<ul class="two-col-ul">
  <li>item 1</li>
  <li>item 2</li>
  <li class="ck-item">ck-item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li class="ck-item">ck-item 4</li>
  <li>item 5</li>
  <li class="ck-item">ck-item 5</li>
</ul>

对应CSS配置：

.two-col-ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  list-style: none;
  padding-left: 0;
}
/* ck-item自动放到第二列 */
.two-col-ul .ck-item {
  grid-column: 2;
}
/* 无对应ck-item的普通条目自动跨两列 */
.two-col-ul li:not(.ck-item):not(:has(+ .ck-item)) {
  grid-column: 1 / -1;
}

注：方案2用到的:has()选择器兼容性符合现代主流浏览器要求，若需要兼容极低版本浏览器，建议使用方案1。

两种方案均可实现：无论第一列文本长度多少，第二列所有ck-item始终保持水平对齐，两列间距固定的效果。

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