diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css
index ae0155eec..00312cb00 100644
--- a/packages/editor/core/src/styles/editor.css
+++ b/packages/editor/core/src/styles/editor.css
@@ -72,10 +72,16 @@ ul[data-type="taskList"] li {
 }
 
 ul[data-type="taskList"] li > label {
+  position: absolute;
+  left: -5px;
   margin: 0.1rem 0.15rem 0 0;
   user-select: none;
 }
 
+ul[data-type="taskList"] li > div {
+  margin-left: 1.15rem;
+}
+
 ul[data-type="taskList"] li > label input[type="checkbox"] {
   border: 1px solid rgba(var(--color-border-300)) !important;
   outline: none;
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index f6afdfbc1..425ad89b0 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -113,7 +113,7 @@ export const CoreEditorExtensions = ({
   }),
   TaskItem.configure({
     HTMLAttributes: {
-      class: "flex",
+      class: "relative",
     },
     nested: true,
   }),
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index 33853e9b1..3f0cd98c3 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -79,7 +79,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
   }),
   TaskItem.configure({
     HTMLAttributes: {
-      class: "flex pointer-events-none",
+      class: "relative pointer-events-none",
     },
     nested: true,
   }),