设置justify-content: space-between后按钮无间距，如何实现两端分布？

开发者阿泽

2026-11-7

问题根因

核心错误1：styled-components 模板字符串内的 CSS 属性值错误添加了引号。你编写的 display: 'flex' 这类带引号的写法不符合 CSS 语法规则，浏览器会直接忽略无效属性，导致 flex 布局根本没有启用，justify-content: space-between 自然不会生效。
核心错误2：Divbuttons 使用绝对定位但未指定宽度。绝对定位元素默认宽度为「内容自适应」，也就是只会刚好包裹两个按钮的总宽度，没有剩余空间可供 justify-content 分配，就算 flex 布局生效也不会出现两端间距。
附带错误：按钮组件里的 box-sizing: 'border-box' 同样带了多余引号，属于无效CSS属性。

修复方案

移除所有 CSS 属性值外层的多余引号，符合纯 CSS 语法要求
给绝对定位的按钮容器指定有效宽度：要么通过 left: 0; right: 0 让它撑满父容器宽度，要么直接设置固定/百分比宽度
可选优化：如果不需要严格撑满剩余空间，可以额外添加 gap 属性设置按钮间的固定间距做兜底

修复后代码如下：

export const Divbuttons = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  position: absolute;
  // 新增：让绝对定位容器撑满父元素宽度，产生可分配的剩余空间
  left: 0;
  right: 0;
  // 可选：固定按钮间兜底间距
  // gap: 16px;
`;

export const Continue = styled.button`
  line-height: 16px;
  letter-spacing: 1.25px;
  padding: 10px 23px;
  box-sizing: border-box;
  position: static;
`;

export const Cancel = styled.button`
  line-height: 16px;
  letter-spacing: 1.25px;
  padding: 10px 23px;
  box-sizing: border-box;
  position: static;
`;