React TodoList中如何让Checkbox与文本并排显示？CSS问题求助

下面提供几种简单有效的CSS实现方式，直接套用就能解决你的问题：

方法1：Flex布局（推荐，现代布局首选） #

给包裹元素.todo-item设置flex布局，同时对齐垂直方向的内容，还能轻松控制两者间距：

.todo-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* checkbox和文本之间的间距，可按需调整 */
}

/* 可选：去掉p标签默认的上下外边距，避免多余间距 */
.todo-item p {
  margin: 0;
}

方法2：Inline-block布局 #

通过将input和p标签设置为行内块元素，再调整垂直对齐方式：

.todo-item input {
  display: inline-block;
  vertical-align: middle;
}

.todo-item p {
  display: inline-block;
  vertical-align: middle;
  margin: 0; /* 清除p标签默认外边距 */
  margin-left: 8px; /* 控制间距 */
}

方法3：浮动布局（不推荐，仅作兼容旧场景参考） #

利用浮动让元素并排，需要处理父元素的高度塌陷问题：

.todo-item {
  overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}

.todo-item input {
  float: left;
  margin-right: 8px;
}

.todo-item p {
  overflow: auto; /* 让文本环绕浮动元素 */
  margin: 0;
}

以上三种方法任选一种，加到你的样式文件里就能实现checkbox和文本并排显示的效果。

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