待办事项列表Delete按钮右浮动错位问题求助

嘿，我明白你现在遇到的Delete按钮对齐困扰了——第一个按钮能靠右，后面的却参差不齐，这其实是因为你依赖line-height做垂直居中的同时，没有给按钮一个稳定的布局方式。咱们来快速修复它：

问题根源 #

你原本给<li>设置了height: 50px和line-height: 50px来实现垂直居中，但<button>是inline-block元素，它自带的margin和padding会打破这种纯文本的垂直对齐逻辑；再加上没有给按钮一个固定的右侧定位规则，当列表项文本长度变化时，按钮就会跟着错位。

解决方案：用Flex布局重构列表项 #

Flex布局是处理这种“左右分栏+垂直居中”场景的最佳选择，完全不需要依赖float或者line-height。修改你的CSS如下：

1. 更新<li>的样式：

li {
  height: 50px;
  /* 替换line-height，用flex实现垂直居中和左右分布 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px; /* 给内容加左右内边距，避免贴边 */
}

2. 微调按钮的边距（避免Flex布局下的间距冲突）：

li>button {
  background-color: red;
  margin: 0; /* 去掉默认margin，让Flex控制间距 */
  padding: 8px 12px; /* 可以根据需求调整按钮大小 */
}

为什么这能解决问题？ #

• display: flex让<li>变成弹性容器，里面的文本和按钮会自动成为弹性项目
• justify-content: space-between会把文本推到左侧，按钮推到右侧，不管文本多长，按钮都会稳稳固定在右边
• align-items: center保证所有内容垂直居中，完美替代line-height的作用

现在你再测试新增或删除列表项，所有Delete按钮都会整齐地靠右对齐了~

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