CSS设置多个ul列表打印时按3列横向顺序填充分页的实现方法

核心修改逻辑如下：

• 新增父容器包裹所有<ul>列表，统一控制列排版规则
• 列填充模式改为auto，实现先填满前一列再填充后一列的顺序
• 禁止单个列表条目内断页/断列，保证学校信息完整
• 移除独立<ul>的列属性和错误的分页规则，统一由父容器控制排版

修改后的CSS代码 #

@page {
  size: A4;
  margin: 1cm; /* 可根据实际打印需求调整边距 */
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
  }
}
/* 新增父容器排版规则 */
.print-container {
  columns: 3;
  column-fill: auto;
  column-gap: 1cm; /* 列间距可调整 */
  width: 100%;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* 禁止单个条目拆分到两列/两页 */
li {
  position: relative;
  break-inside: avoid;
  margin-bottom: 0.3cm;
}
.element {
  position: relative;
  padding-bottom: 0.3cm;
}
.column {
  width: 0.1cm;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0.35cm; /* 对齐左侧圆形标记 */
}
.circle {
  border-radius: 50%;
  width: 0.7cm;
  height: 0.7cm;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  text-align: center;
  line-height: 0.7cm;
  margin-right: 0.5cm;
  z-index: 999;
  position: relative;
}
table {
  display: inline;
  border-spacing: 0;
  padding-left: 0.2cm;
}
td {
  padding: 0;
}

修改后的HTML结构 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <!-- 新增父容器包裹所有列表 -->
  <div class="print-container">
    <ul class="type1">
      <li>
        <span class="circle" style="background-color: #1B67B1;">1</span>
        <div class="column" style="background-color: #1B67B1;"></div>
        <table>
          <tr><td style="color: #1B67B1;">学校名称1</td></tr>
          <tr><td>地址行1</td></tr>
          <tr><td>地址行2</td></tr>
        </table>
      </li>
      <!-- 剩余蓝色标记的li继续放这里 -->
    </ul>
    <ul class="type2">
      <li>
        <span class="circle" style="background-color: #E83F8F;">2</span>
        <div class="column" style="background-color: #E83F8F;"></div>
        <table>
          <tr><td style="color: #E83F8F;">学校名称2</td></tr>
          <tr><td>地址行1</td></tr>
          <tr><td>地址行2</td></tr>
        </table>
      </li>
      <!-- 剩余粉色标记的li继续放这里 -->
    </ul>
    <ul class="type3">
      <li>
        <span class="circle" style="background-color: #2E9E4E;">3</span>
        <div class="column" style="background-color: #2E9E4E;"></div>
        <table>
          <tr><td style="color: #2E9E4E;">学校名称3</td></tr>
          <tr><td>地址行1</td></tr>
          <tr><td>地址行2</td></tr>
        </table>
      </li>
      <!-- 剩余绿色标记的li继续放这里 -->
    </ul>
  </div>
</body>
</html>

适配单页45条的调整方法 #

如果当前单页容纳条目数不符合要求，可以调整以下参数：

• 调整@page的边距大小
• 调整li的margin-bottom数值
• 调整column-gap的列间距数值

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