From 51ec07952596d2a2ce5a82aa7398f141e82ac7fd Mon Sep 17 00:00:00 2001
From: MageByte-Zero <zero_develop@163.com>
Date: Mon, 11 May 2026 19:57:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20safe=20bullet=20pattern=20=E2=80=94=20ne?=
 =?UTF-8?q?ver=20use=20display:grid=20on=20li=20with=20inline=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS grid on <li> creates anonymous boxes per text node and inline
element, swallowing the bullet marker into one of those boxes. Bullets
render broken or misaligned. Closes #62.

Documents the safe position:absolute ::before hanging-indent pattern
that works correctly with inline <code>, nested lists, and screen readers.
---
 html-template.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/html-template.md b/html-template.md
index 384e1a10..360b688d 100644
--- a/html-template.md
+++ b/html-template.md
@@ -317,6 +317,34 @@ exportFile() {
 }
 ```
 
+## Bullet / List Patterns
+
+**Never use `display:grid` on `<li>` elements that contain inline `<code>`.** CSS grid wraps each text node and inline element in anonymous boxes, causing the bullet marker to be swallowed into one of those boxes. The list renders with broken indentation and missing or misplaced bullets.
+
+Safe hanging-indent pattern (works with inline `<code>`, nested lists, and screen readers):
+
+```css
+ul {
+    list-style: none;
+    padding: 0;
+}
+ul li {
+    position: relative;
+    padding-left: 1.5em;
+    margin-bottom: 0.4em;
+}
+ul li::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: var(--accent);
+}
+```
+
+Use this pattern instead of `display:grid` / `display:flex` on `<li>` whenever list items mix text with inline elements.
+
+---
+
 ## Image Pipeline (Skip If No Images)
 
 If user chose "No images" in Phase 1, skip this entirely. If images were provided, process them before generating HTML.