如何将操作按钮与任务列表项横向并排显示？

我懂你现在的困扰——想让任务文本和完成、删除按钮横向排在一行，但按钮总是乖乖待在任务项的下方。其实问题出在你的容器布局和元素默认的显示方式上，咱们来快速修复它：

核心问题分析 #

你的.task容器（每个任务的外层div）默认是块级布局，里面的.task-item（li元素）也是块级元素，会独占一行，所以后面的按钮只能被挤到下一行。咱们只需要给外层容器加上弹性布局，再调整几个样式属性就能搞定。

修改后的CSS代码 #

.task-list {
  list-style: none;
  min-width: 30%;
  padding-left: 0; /* 去掉ul默认内边距，让任务对齐更整齐 */
}

.tasks-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 给任务外层容器添加flex布局 */
.task {
  display: flex;
  align-items: center; /* 让元素垂直居中对齐 */
  margin: 15px auto; /* 控制整个任务块的上下间距 */
}

.task-item {
  flex: 1; /* 让任务文本占据容器剩余空间，按钮自动靠右侧 */
  height: 35px;
  background-color: #eeeeee;
  border: none;
  border-radius: 10px;
  padding: 10px 30px;
  box-shadow: 5px 5px 5px grey;
  margin: 0; /* 移除原来的margin auto，避免打乱布局 */
}

.completed-btn {
  background: transparent; /* 去掉按钮默认背景，风格更统一 */
  color: #ff9551;
  font-size: 18px;
  margin-left: 1rem; /* 只保留左侧间距，避免左右间距过大 */
  cursor: pointer;
  transition: 0.4s;
  border: none;
}

.delete-btn {
  background: transparent;
  color: #ff1e00;
  font-size: 18px;
  margin-left: 0.5rem;
  cursor: pointer;
  border: none;
}

关键修改点说明 #

• 给.task添加display: flex和align-items: center：让容器内的任务文本与按钮横向排列，同时保持垂直居中。
• 给.task-item设置flex: 1：让任务文本区域自动填充容器剩余空间，按钮会自然靠在右侧。
• 调整间距归属：把原.task-item的上下间距移到.task上，控制整个任务块的间距，避免文本与按钮间出现多余空隙。
• 优化按钮样式：去掉按钮默认背景色，调整左右间距，让整体视觉更协调。

这样修改后，任务文本和两个操作按钮就能完美横向并排啦！

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