React待办列表CSS问题：如何将任务按钮移至右侧？

你只需要利用Flex布局的特性，给任务文本容器添加flex-grow: 1，即可让操作按钮自动靠右对齐。修改后的CSS代码如下：

* {
  font-family: Arial, Helvetica, sans-serif;
}

.App {
  display: block;
  text-align: center;
  align-items: center;
}

.App input {
  margin-bottom: 10px;
  height: 20px;
  
}

.done {
  text-decoration: line-through;
  color:rgb(118, 118, 118)
}

.task {
  align-items: center;
  display: flex;
  margin: auto;
  width: 50%;
  padding: 10px;
  border: 1px solid green;
}

.task .task-text {
  font-size: 20px;
  flex-grow: 1; /* 添加这行样式 */
}

.task .task-btn {
  cursor: pointer;

}

.task .delete {
  color: red;
}

.task .check {
  color: green;
}

原理说明 #

.task容器已经使用了display: flex，默认子元素从左到右排列。给.task-text设置flex-grow: 1后，它会自动填充容器内的剩余空间，把两个操作按钮推到容器的最右侧。

另一种实现方式 #

如果不想修改文本容器的样式，也可以给第一个操作按钮添加margin-left: auto，强制让按钮靠右：

.task .check {
  color: green;
  margin-left: auto; /* 添加这行样式 */
}

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