如何用HTML/CSS结合<li>和<hr>创建分段网格/列表？

嘿，看起来你想用带分段的<ul>列表来做网格布局对吧？先看了下你给出的代码片段，你是手动在每几个<li.item>后面加了带<hr>的<li.break>来划分区段——这个思路没问题，但可能会遇到布局对齐的小问题，我给你几个实用的优化方案：

你的现有代码结构大概是这样的：

<ul class="sortable">
  <li class="item">item 1</li>
  <li class="item">item 2</li>
  <li class="break"><hr></li>
  <li class="item">item 3</li>
  <li class="item">item 4</li>
  <li class="break"><hr></li>
  <li class="item">item 5</li>
  <!-- 更多列表项 -->
</ul>

要让这个结构完美适配网格，需要先重置列表默认样式，再给网格容器和项设置规则，最后处理分隔项的布局：

/* 重置列表默认的内外边距和项目符号 */
.sortable {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 把ul设为网格容器 */
  display: grid;
  /* 这里假设你想要每行2个item，可根据需求调整列数 */
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem; /* 网格项之间的间距 */
}

/* 网格项的基础样式 */
.item {
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 让分隔项横跨整个网格宽度 */
.break {
  grid-column: 1 / -1; /* 强制占满所有列 */
  margin: 1rem 0; /* 给分隔线上下加间距，避免和item贴太近 */
}

/* 美化分隔线，去掉默认的边框样式 */
.break hr {
  border: none;
  height: 2px;
  background-color: #ddd;
  width: 100%;
  margin: 0;
}

这样设置后，<li.break>会自动对齐网格的左右边缘，分隔线不会破坏整体的网格布局。

如果你的列表项是动态生成的，不想手动每隔x个就加一次分隔，可以用JS自动完成这个操作：

const sortableList = document.querySelector('.sortable');
const items = sortableList.querySelectorAll('.item');
const itemsPerSection = 2; // 每2个item后插入分隔，可按需修改

// 遍历列表项，每隔指定数量插入分隔
for (let i = itemsPerSection; i < items.length; i += itemsPerSection + 1) {
  const breakLi = document.createElement('li');
  breakLi.className = 'break';
  const hr = document.createElement('hr');
  breakLi.appendChild(hr);
  sortableList.insertBefore(breakLi, items[i]);
}

这个方法会自动帮你在每itemsPerSection个item后插入分隔，适合内容动态变化的场景。

• 如果你做响应式布局，比如移动端改成1列、平板改成3列，记得同步调整grid-template-columns和itemsPerSection的值，保证分隔线始终横跨全宽。
• 看你的列表有.sortable类，应该是用了拖拽排序库（比如SortableJS），记得给<li.break>加上draggable="false"属性，避免分隔项被拖拽打乱布局；如果排序后需要重新调整分隔位置，可以在排序结束的回调里重新运行上面的JS插入逻辑。

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