文本编辑器工具栏布局 · 样张对比
9 个格式按钮:加粗 / 斜体 / H1 / H2 / 项目符号 / 编号 / 引用 / 撤销 / 重做。编辑器列宽 900px。
当前
按钮全挤左,右侧大片浪费
根因:工具栏末尾一个
flex-1
spacer 把所有按钮顶到左边。
B
I
H1
H2
≔
№
❝
↶
↷
从这里开始写你的故事、脚本或文案……
方案 A · 推荐
分组锚定:格式靠左 + 撤销/重做靠右
格式按钮按语义分 3 簇(强调 · 标题 · 列表/引用)用细分隔线隔开,撤销/重做推到右端。两端用满,中段留白变成「呼吸位」而非「废墟」——这是 Word / Google Docs / 飞书的通用做法。
B
I
H1
H2
≔
№
❝
↶
↷
从这里开始写你的故事、脚本或文案……
方案 B
整组居中
所有按钮作为一组水平居中,左右留白对称,视觉不偏。改动最小(去掉 spacer + justify-center + 加分隔线),但中间没有功能分布的「两端锚」感。
B
I
H1
H2
≔
№
❝
↶
↷
从这里开始写你的故事、脚本或文案……
方案 C
收窄并居中正文列(工具栏跟随)
工具栏 + 正文一起收窄到 ~720px 居中(仿 Notion / Medium 长文排版),「900px 宽工具栏」这个浪费的源头直接消失,长文阅读也更舒服。改动最大:动到编辑器列宽,需连带正文一起调。
B
I
H1
H2
≔
№
❝
↶
↷
从这里开始写你的故事、脚本或文案……