2026-08-10 20:372026-08-10 20:37记录

主页标签栏留白修复:min-width 与溢出收缩的冲突

前阵子折腾主题(ark)的编辑器标签栏,发现固定在最左边的”主页”标签格外宽,右侧拖着一串空白,跟旁边的文章标签放一起很突兀。这篇记录定位与修改过程,以及为什么最后又回滚了。

现象:主页标签太长,一串空白

标签栏(.editor-tabline)长这样:左边贴着一个固定不动的”主页”标签,后面是当前打开的文章标签。主页标签只有一个小图标加”主页”两个字,却占了整整 132px,右边一大片空白。

标签栏修改前后对比

上排是修改前,下排是修改后(宽度贴着内容走)。视觉上就是”太长,有一堆空白” vs “刚好贴合”。

.editor-tab 的基础规则给所有标签设了一个统一的最小宽度,这是为了多标签时观感整齐:

.editor-tab {
  ...
  max-width: min(260px, 70vw);
  min-width: 132px;
  ...
}

对普通文章标签来说 132px 没什么问题——标题长,本来就要占位。但”主页”标签固定贴左、只有俩字,132px 就明显偏宽了。

有意思的是,标签栏溢出时(打开的标签太多,一行放不下)其实有一套收缩规则,会把主页标签从 132px 缩成一个 40px 的纯图标:

.editor-tabline.is-overflowing .editor-tab.is-pinned {
  min-width: 40px;
  max-width: 40px;
  justify-content: center;
  padding: 0 7px;
  gap: 0;
}

所以问题只出在没溢出的时候——一切正常,主页标签就是 132px 宽,空白常驻。

让主页标签不再被 132px 的最小宽度撑开,宽度改由内容决定:

.editor-tab.is-pinned {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 0;   /* 新增:允许收缩到内容宽度 */
  gap: 7px;
}

.editor-tab.is-pinned 本身没有覆盖 min-width,所以基础规则的 132px 一直压在它头上;补上 min-width: 0 后,标签宽度 = 图标 + 文字 + padding,约 68px,空白消失。

改完立刻暴露了另一个问题——标签的左右 padding 本来就不对称:

.editor-tab {
  padding: 0 9px 0 13px;   /* 左 13px,右 9px */
}

左 13px 右 9px 的 4px 差,在 132px 宽时被大留白盖住根本看不出来;一旦缩到 68px,左右明显不一样齐,视觉上反而更难受。

考虑到左右不对称比”有点空”更扎眼,最终把 min-width: 0 撤掉,恢复了原来的样子。真正要落地,得把两个值一起改:

这次折腾的教训:缩小一个元素之前,先想清楚它的 padding/margin 是不是为原来的尺寸服务的。132px 的宽度恰好掩盖了不对称的内边距,一收缩就原形毕露。改宽度不是孤立的一行代码,得把”邻居”一起看。