如何实现附图所示的复选框连接边框并适配响应式屏幕

要实现响应式的复选框连接边框效果，核心是避免固定高度，利用CSS布局的自适应特性让连线跟随元素位置自动调整。下面是一个基于Flex布局的实现方案，完全适配响应式场景：

实现思路 #

1. 用嵌套Flex容器构建层级结构，让每个复选框的父容器自然撑开高度
2. 利用伪元素(::before/::after)绘制横向和纵向连线，通过position: absolute结合Flex对齐方式定位
3. 所有尺寸使用相对单位（如rem、CSS变量），确保在不同屏幕尺寸下自动适配

完整代码示例 #

HTML结构

<div class="checkbox-tree">
  <div class="checkbox-item">
    <input type="checkbox" id="item1">
    <label for="item1">父选项</label>
    <div class="checkbox-children">
      <div class="checkbox-item">
        <input type="checkbox" id="item2">
        <label for="item2">子选项1</label>
      </div>
      <div class="checkbox-item">
        <input type="checkbox" id="item3">
        <label for="item3">子选项2</label>
        <div class="checkbox-children">
          <div class="checkbox-item">
            <input type="checkbox" id="item4">
            <label for="item4">孙选项1</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS样式

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 2rem;
  line-height: 1.5;
}

/* 树形结构容器 */
.checkbox-tree {
  --line-width: 2px;
  --line-color: #333;
  --spacing: 1.5rem;
}

/* 单个选项容器 */
.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  position: relative;
}

/* 子选项容器 */
.checkbox-children {
  margin-left: var(--spacing);
  position: relative;
}

/* 绘制纵向连线 */
.checkbox-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * var(--spacing) / 2);
  width: var(--line-width);
  height: 100%;
  background: linear-gradient(to bottom, var(--line-color) 50%, transparent 50%);
  background-size: 100% calc(var(--spacing) + 1rem);
  background-repeat: repeat-y;
}

/* 绘制横向连线 */
.checkbox-item::before {
  content: '';
  position: absolute;
  top: calc(var(--spacing) / 4);
  left: calc(-1 * var(--spacing) / 2);
  width: calc(var(--spacing) / 2);
  height: var(--line-width);
  background-color: var(--line-color);
}

/* 第一个子选项不需要顶部横向连线 */
.checkbox-children > .checkbox-item:first-child::before {
  top: calc(var(--spacing) / 2);
}

/* 复选框样式 */
input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

label {
  flex: 1;
}

方案优势 #

• 完全响应式：所有间距和尺寸使用CSS变量和相对单位，自动适配不同屏幕宽度
• 自适应高度：连线高度由子元素自然高度决定，无需手动设置固定值
• 可扩展性：修改CSS变量即可快速调整线条样式、颜色和间距，支持多层级嵌套
• 兼容性：兼容现代浏览器，无需依赖JavaScript

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