CSS Flex新手求助：实现标题左对齐、编辑删除按钮右对齐布局异常

AI 小北

2026-10-6

问题原因

对齐属性配置错误：justify-content是flex容器的专属属性，作用是控制容器内部子元素的对齐规则，你当前将它写在了.sheetTitle、.edit-delete这两个子容器上，不会生效，需要配置在它们的父级flex容器.headSheetWrapper上。
缺少两端对齐规则：flex容器默认只会让子元素占用自身内容宽度，没有设置对应对齐规则的情况下，不会自动将标题推到左侧、按钮推到右侧。
紫色短划线问题：一般是标题元素h2的默认样式未重置，或者h2被链接标签<a>包裹，触发了浏览器默认的访问后链接下划线样式。

修复方案

替换原有CSS为以下代码即可：

.sheet {
  width: 100%;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  box-shadow: 0px 0px 16px -8px rgba(0, 0, 0, 0.68);
  margin: 30px 0;
}

.sheetWrapper {
  padding: 10px;
}

.headSheetWrapper {
  display: flex;
  width: 100%;
  /* 子元素两端对齐，直接实现标题左、按钮右的效果 */
  justify-content: space-between;
  /* 垂直方向居中对齐，避免标题和按钮高度不一致错位 */
  align-items: center;
}

.sheetTitle h2 {
  /* 重置h2默认边距和装饰线，解决紫色短划线问题 */
  margin: 0;
  padding: 0;
  text-decoration: none;
  /* 若h2确实被a标签包裹，可取消下方注释重置访问后颜色 */
  /* color: #333; */
}

.edit-delete {
  display: flex;
  /* 给两个按钮加间隔，更美观 */
  gap: 10px;
}