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

style(editor): 任务列表 checkbox 与文本垂直中线对齐

Browse Source 
与前台 input.css 同步,编辑器内 task list 同样改为 align-items: center。

- li: flex-start → center,实现真正的中线对齐
- label: 去掉 margin-top: 0.3em(center 已处理)
- 新增 li > div > p { margin: 0 }:task list 项内段落清掉默认 .6em 0
  上下 margin,否则 margin 撑高 div 导致 checkbox 与文本错位、项间距过大
This commit is contained in:
xfy 2026-07-02 14:38:59 +08:00
parent 17006f8d0c
commit 4e96243407
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -330,14 +330,13 @@
.tiptap-editor ul[data-type="taskList"] li { .tiptap-editor ul[data-type="taskList"] li {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 0.5em; gap: 0.5em;
margin: 0.3em 0; margin: 0.3em 0;
} }
.tiptap-editor ul[data-type="taskList"] li > label { .tiptap-editor ul[data-type="taskList"] li > label {
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.3em;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
@ -353,6 +352,12 @@
flex: 1; flex: 1;
} }
/* task list 项内的段落去掉上下 margin（.tiptap-editor p 默认 .6em 0），
否则 margin 会撑高 div，使 checkbox 与文本垂直中线错位、项间距过大。 */
.tiptap-editor ul[data-type="taskList"] li > div > p {
margin: 0;
}
.tiptap-editor ul[data-type="taskList"] li[data-checked="true"] > div { .tiptap-editor ul[data-type="taskList"] li[data-checked="true"] > div {
text-decoration: line-through; text-decoration: line-through;
opacity: 0.6; opacity: 0.6;