React项目中如何让深色/浅色模式切换按钮并排显示？

问题分析 #

你用float: left没生效，大概率是两个原因：要么父元素没处理浮动导致布局异常，要么ToggleButton组件本身是块级元素（默认占满父容器宽度），即使外层div浮动，按钮也会撑满宽度，只能上下堆叠。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：用Flexbox布局（最推荐，现代布局方式） #

直接给父容器.parent设置display: flex，这是目前实现横向排列最简洁稳定的方式，还能轻松控制间距和对齐：

修改CSS：

.parent {
  display: flex;
  gap: 15px; /* 可选，控制两个按钮之间的间距 */
  align-items: center; /* 可选，让按钮垂直居中对齐 */
}

.toggleButtonDark, .toggleButtonLight {
  padding: 15px 15px;
  /* 删掉原来的float: left，Flex已经能实现并排 */
}

方案2：让按钮容器变为行内块元素 #

如果不想用Flex，也可以把按钮的外层div改成inline-block，同时确保ToggleButton不占满宽度：

修改CSS：

.toggleButtonDark, .toggleButtonLight {
  padding: 15px 15px;
  display: inline-block; /* 替换float: left */
  margin-right: 15px; /* 控制间距 */
}

/* 额外确保ToggleButton本身不撑满宽度 */
.toggleButtonDark > button, .toggleButtonLight > button {
  width: fit-content;
}

方案3：修复浮动布局（如果一定要用float） #

如果你坚持用float，需要给父容器添加清除浮动的样式，同时限制按钮容器的宽度：

修改CSS：

/* 父容器添加清除浮动，防止高度塌陷 */
.parent::after {
  content: "";
  display: table;
  clear: both;
}

.toggleButtonDark, .toggleButtonLight {
  padding: 15px 15px;
  float: left;
  width: auto; /* 确保宽度自适应内容，不占满父容器 */
  margin-right: 15px; /* 控制间距 */
}

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