1. 从一段老代码说起div ul li 到底难在哪如果你搜到这篇文章大概率是手里正攥着一段 div ul li 的 CSS改了半天浏览器里还是歪的。div、ul、li这三个标签本身没什么门槛真正让人头疼的是同样是ul li为什么有的能横着排成导航条有的竖着排成侧边菜单有的还能铺成多列网格默认样式里那个小圆点、那圈内边距、那个换行到底是谁加的这篇就围绕三种最常见的 UL-LI 布局形式展开——横向导航、纵向列表、多列网格。每一种我都会给出可直接复制的 HTML 结构、CSS 样式以及浏览器里怎么验证它真的生效了。最后再补一段 TaoToken 的 settings.json 配置骨架方便你在 AI 辅助编码工具里统一走一个 Key/API 通道让工具帮你改样式时不用反复折腾接入。适合谁看刚接触前端、被list-style和display绕晕的同学想快速搭导航和列表、不想每次都翻旧项目的人以及已经在用 AI 编码助手、想把模型通道固定下来的开发者。全程小白友好代码都能直接跑。2. 先把 TaoToken 通道配好再谈样式写样式这件事现在很多人是边写边让 AI 助手补全的。问题在于不同工具各配各的 Key改一次环境就要重来一遍。TaoToken 的思路是把模型调用收敛到一个统一入口你只需要维护一份配置。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 这个不加 UTM。注意它是给你在 AI 编码工具里做统一接入用的不是拿来替代编辑器本身的样式还是你在编辑器里写。配置的核心就是一份 settings.json 骨架。下面这份可以直接当模板把占位符换成你自己的值即可{ provider: taotoken, api_base: https://taotoken.net/api, api_key: sk-你的Key, models: { chat: claude-sonnet, code: claude-sonnet }, timeout_ms: 60000, retry: 2 }几个字段说明一下。api_base固定填 https://taotoken.net/api 不要带多余路径api_key去控制台生成别硬编码进公开仓库timeout_ms给 60 秒比较稳样式补全这种短请求一般几秒就回retry设 2 次网络抖动时能自动重试。注意Key 属于敏感信息建议放在环境变量或本地未提交的配置文件里不要直接写进会 push 的代码。如果你只是想先验证模型通不通可以走模型对话页面快速试一句如果是长期写代码、跑 Agent建议用 Coding Plan 把额度固定下来省得每次临时配。3. 三种 UL-LI 布局逐个拆开写3.1 横向导航display 与 float 两条路横向导航是最常见的需求。默认li是块级、竖着排的要横过来有两条主流路线。第一条是display: inline-block简单直接nav classnav-inline ul lia href#首页/a/li lia href#文档/a/li lia href#控制台/a/li lia href#价格/a/li /ul /nav.nav-inline ul { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #778; } .nav-inline li { display: inline-block; margin: 0 2px; } .nav-inline li a { display: inline-block; padding: 6px 14px; background: #dde; border: 1px solid #778; text-decoration: none; color: #448; } .nav-inline li a:hover { background: #aae; color: #000; }这里的关键点list-style: none去掉小圆点margin/padding: 0清掉浏览器默认缩进display: inline-block让每个li变成行内块。a也设成inline-block是为了让内边距撑开点击区域不然只有文字能点。第二条是float: left老项目里很常见.nav-float ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } .nav-float li { float: left; width: 120px; text-align: center; padding: 6px 0; cursor: pointer; } .nav-float li.active { background: #aae; }float方案记得给父级ul加overflow: hidden或清除浮动否则父容器高度会塌成 0下面的内容会顶上来。这是新手最常踩的坑之一。3.2 纵向列表还原成块级控制间距纵向列表反而是li的默认行为难点在于去掉默认样式后怎么控制行距和分隔线。ul classlist-vertical li账号设置/li li通知偏好/li li安全中心/li li退出登录/li /ul.list-vertical { list-style: none; margin: 0; padding: 0; width: 220px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; } .list-vertical li { padding: 10px 16px; border-bottom: 1px solid #eee; cursor: pointer; } .list-vertical li:last-child { border-bottom: none; } .list-vertical li:hover { background: #f5f7fa; }li:last-child去掉最后一条的下边框避免和容器边框叠成双线。overflow: hidden配合border-radius让子项背景色不会溢出圆角。这套结构拿来做侧边菜单、设置页都很稳。3.3 多列网格flex 与 grid 怎么选多列网格适合卡片列表、商品展示。两种写法各有场景。用 flex 做等宽多列ul classgrid-flex li卡片一/li li卡片二/li li卡片三/li li卡片四/li /ul.grid-flex { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .grid-flex li { flex: 1 1 calc(25% - 12px); min-width: 160px; padding: 16px; background: #f5f7fa; border: 1px solid #e0e0e0; border-radius: 6px; box-sizing: border-box; }flex: 1 1 calc(25% - 12px)表示每行四列gap负责间距min-width保证窄屏时不会挤成一条线。box-sizing: border-box让内边距算进宽度不然会溢出换行。用 grid 更省心.grid-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .grid-grid li { padding: 16px; background: #f5f7fa; border: 1px solid #e0e0e0; border-radius: 6px; }auto-fill加minmax能自动根据容器宽度决定列数响应式几乎不用额外写媒体查询。三种布局的对照可以看这张表布局形式核心属性适用场景常见坑横向导航display:inline-block / float顶部菜单、标签页float 未清浮动导致父级塌陷纵向列表默认块级 padding侧边菜单、设置项默认圆点和缩进未清除多列网格flex / grid卡片、商品列表未设 box-sizing 导致换行4. 浏览器里怎么验证真的生效写完别急着说“应该没问题”打开浏览器按 F12 看几件事。第一看ul的计算样式。选中ul在 Computed 面板里确认list-style-type是nonemargin和padding是 0。如果还有值说明你的选择器没命中检查类名拼写和优先级。第二看li的盒模型。横向导航里如果li还是竖着排多半是display没生效或者被更具体的选择器覆盖了。在 Styles 面板里能看到被划掉的属性顺着往上找是谁覆盖的。第三用设备模拟器拉窄窗口。多列网格在窄屏下应该自动减少列数如果出现横向滚动条检查是不是有元素固定了width没设max-width。第四验证交互态。鼠标悬停时背景色变没变a:hover有没有生效。如果没反应确认a的text-decoration和颜色是不是被浏览器默认样式压住了。一个快速自检的写法临时给li加outline: 1px solid red能直观看到每个li的实际占位排查间距问题特别快查完删掉就行。5. 本篇常见错排查小圆点去不掉。只写了li { list-style: none }有时不够因为圆点是画在li上的但某些浏览器会受ul影响。稳妥写法是ul { list-style: none }和li { list-style: none }都写上。横向导航换行了。常见原因是li之间在 HTML 里有换行或空格inline-block会把空白渲染成一个空格宽度累积起来就换行。解决办法把li标签写在同一行或者给父级设font-size: 0再在li里恢复字号。float 之后父容器没高度。前面提过给父级加overflow: hidden或者用::after清除浮动.nav-float ul::after { content: ; display: block; clear: both; }grid 列数不对。检查grid-template-columns里的minmax最小值是不是比容器还宽那样会强制单列。把minmax(160px, 1fr)的最小值调小试试。样式改了没变化。先强制刷新CtrlF5排除缓存。再看是不是有多个同名类或者内联样式优先级更高。用!important能临时验证但别长期留在代码里。AI 助手补全的样式和手写冲突。如果你在用统一通道让模型补 CSS注意它可能生成和你现有类名重复的规则。建议在 settings.json 里把模型固定成你常用的那个减少风格漂移改完自己过一遍浏览器验证。6. 把通道和样式一起固定下来样式调通之后真正省时间的是把工具链也固定住。TaoToken 的接入文档里有各工具的配置示例照着填就行Key 在控制台生成生成后直接填进前面那份 settings.json 骨架。想先确认模型响应正常去模型对话页面发一句“帮我写一个横向导航的 CSS”试试长期写代码、跑 Agent 的话用 Coding Plan 把额度定下来更省心。我自己的习惯是样式先在浏览器里用 outline 调好间距确认三种布局都稳了再让 AI 助手按现有类名补响应式和交互态。这样它补出来的代码不会跑偏你也不用反复解释上下文。通道固定、样式固定剩下的就是安心写页面。