xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(editor): task list label 内 checkbox 居中

Browse Source 
label 默认是 inline 元素,内部 checkbox(inline-block)受父级行高影响会产生
基线间距,导致 checkbox 在 label 盒子内偏上,即便 li 用了 align-items: center
也只对齐了 label 盒子而非 checkbox 本身。

给 label 加 display: flex + align-items: center + line-height: 0,消除行高
撑出的基线空间,让 checkbox 严格居于 label 盒子中心。
This commit is contained in:
xfy 2026-07-02 14:42:52 +08:00
parent 4e96243407
commit 873ccb1a80
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
libs/tiptap-editor/src/style.css
View File

@ -339,6 +339,12 @@
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
/* label 默认 inline,内部 checkbox 是 inline-block 会受 line-height 撑出
基线间距导致 checkbox 在 label 内偏上。用 flex 居中并清零行高,
让 checkbox 严格在 label 盒子中心。 */
display: flex;
align-items: center;
line-height: 0;
} }
.tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"] { .tiptap-editor ul[data-type="taskList"] li > label input[type="checkbox"] {