如何让被100%宽度label包裹的复选框按钮横向并排且间距均匀

核心修改逻辑 #

当前布局堆叠的两个核心原因：

• 包裹label的父容器.cs-row无弹性布局规则，元素默认垂直排列
• label样式设置了width: 100%，会强制占满整行宽度

具体修改代码 #

1. 给父容器增加flex布局规则 #

.cs-row {
  display: flex;
  gap: 20px; /* 可自定义调整按钮之间的间距数值 */
  justify-content: space-between;
  width: 100%;
}

2. 调整label的宽度规则 #

你JSX中label使用的类是cs-acr-listing-feature，覆盖原有width:100%的规则即可：

.cs-acr-listing-feature {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-align: center;
  flex: 1; /* 两个按钮自动平分父容器宽度，也可按需设置固定宽度 */
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #101737;
  font-size: 14px;
  border-radius: 8px;
  transition: 0.3s;
  margin-bottom: 30px;
}

可选：移动端适配（小屏幕自动恢复堆叠） #

@media (max-width: 576px) {
  .cs-row {
    flex-direction: column;
  }
  .cs-acr-listing-feature {
    width: 100%;
  }
}

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