React移除absolute定位后复选框堆叠 如何实现单行排列

堆叠问题来自三个样式设置错误：

1. 承载单个复选框+标签的.checkbox-container是块级元素，默认独占一行，且没有横向排列的父容器做布局约束，移除绝对定位后所有元素默认排布在文档流左上角，产生重叠
2. .checkbox-container设置了flex-direction:column，会让内部的复选框和对应标签竖排，不符合“复选框紧邻对应元素”的要求
3. 原代码给每个复选框容器单独加position:absolute本质是手动硬编码坐标，扩展性极差，新增复选框就要重新调整位置参数。

1. 给所有复选框容器新增一层共同的父容器，用flex布局控制所有复选框整体横向排列
2. 调整单个.checkbox-container的flex方向，让内部复选框和标签横向紧邻对齐
3. 移除单个复选框容器上的绝对定位，靠父容器的flex规则自动排列，从根源避免堆叠
4. 清理原CSS中重复的属性声明（比如重复定义的两次box-sizing）

JSX部分 #

{/* 新增外层横向排列容器 */}
<div className="checkbox-group">
  <div className='checkbox-container'>
    <input id='a4' name='A4' type='checkbox'  onChange={(e) =>handleChecked(e)} 
    className='table-seats'/>
    <label htmlFor='a4' className='btn'>A4</label>
  </div>
  <div className='checkbox-container'>
    <input id='a5' name='A5' type='checkbox'  onChange={(e) =>handleChecked(e)} 
    className='table-seats'/>
    <label htmlFor='a5' className='btn'>A5</label>
  </div>
</div>

CSS部分 #

/* 外层容器控制所有复选框横向排列 */
.checkbox-group {
  display: flex;
  flex-direction: row;
  gap: 24px; /* 可按需调整两个复选框之间的间距 */
  align-items: center;
}

/* 单个复选框容器控制内部复选框和标签的对齐 */
.checkbox-container{
  display:flex;
  flex-direction: row; /* 替换原column值，让复选框和标签横向紧邻 */
  align-items: center;
  gap: 6px; /* 可按需调整复选框和对应标签的间距 */
}

.table-seats{
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: url(./img/table_default.png);
  background-size: cover;
  border-radius: 1px;
  position: relative;
  box-sizing: content-box ;
  width: 160px;
  height: 160px;
  border-width: 0;
  transition: all .3s linear;
}

.table-seats:checked{
  background: url(./img/table_selected.png);
  background-size: contain;
  background-repeat: no-repeat;
}

注：原代码中.left2类的position:absolute直接删除即可，不需要保留。如果需要调整整组复选框的位置，直接给外层.checkbox-group设置margin、padding或者定位属性即可，不需要给单个复选框单独设坐标。

如果后续需要多排排列复选框，只需要给.checkbox-group加flex-wrap: wrap属性，设置合适的gap值就会自动换行，不需要逐个调整元素位置。

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