横向导航栏上下边框不能直接套用border-top/border-bottom，因li或a高度不一致、浮动/弹性干扰、父容器未清除浮动，会导致错位、断开或消失；a为行内元素时border-bottom易被裁剪，需设display:block/inline-block并确保padding-bottom≥1px；nav加边框后内容遮挡，应配合padding或box-sizing:border-box控制总高；菜单项独立分隔线推荐nav li + li { border-top: 1px solid #eee; }，避免首尾重复；还需校验边框颜色在深色模式下的WCAG对比度。
横向导航栏上下边框不能直接套用 border-top 和 border-bottom 就完事——因为常见布局中，li 或 a 元素高度不一致、浮动/弹性行为干扰、或父容器未清除浮动，会导致边框错位、断开或消失。
为什么 border-bottom 在 nav ul li a 上不显示？
多数情况是 a 默认为行内元素，即使设置了 border-bottom，其“视觉高度”仍由文本行高决定，边框可能被裁剪或压在文字下方；更常见的是父级 li 没有设定 overflow: hidden 或未触发 BFC，导致子元素边框溢出不可见。
- 必须给
a设置display: block或display: inline-block - 确保
a的padding-bottom足够（至少 1px），否则边框紧贴文字底部，易被忽略 - 若用
flex布局，align-items: center可能挤压垂直空间，需检查line-height与height是否冲突
nav 容器加上下边框后内容被遮挡怎么办？
直接对 nav 元素设 border-top: 2px solid #ccc 和 border-bottom: 2px solid #ccc 很方便，但常出现内部 ul 贴顶/贴底，导致边框被内容覆盖或视觉上“消失”。根本原因是边框属于盒模型的 border 区域，而内容默认从 padding 区域开始渲染。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
nav加padding: 8px 0（上下留白），让边框和内容之间有呼吸感 - 避免同时设置
height和padding——会触发 box-sizing 默认的content-box，导致实际高度超标 - 稳妥做法：改用
box-sizing: border-box，再设height: 48px+padding: 8px 0+border: 2px solid #ccc，总高严格可控
如何让每个菜单项都有独立上下边框，且首尾不重复？
想实现“每项一条横线分隔”，但又不想第一个顶部、最后一个底部多画一道线——这是典型相邻兄弟选择器场景，不是靠 :first-child/:last-child 修修补补就能干净解决的。
- 推荐写法：
nav li + li { border-top: 1px solid #eee; }——只给非首个li加顶边框，天然避开重复 - 如果边框要加在
a上（更利于点击区域），则用：nav a + a { border-top: 1px solid #eee; }，前提是所有a是连续同级元素 - 禁用
float后该选择器才可靠；若用了flex，+选择器依然有效，但注意flex会把li当作 flex item，不影响兄弟关系
真正容易被忽略的是：上下边框颜色在深色背景或高对比度模式下是否满足 WCAG 5:1 对比度要求。别只盯着样式生效没生效，先查 #999 在 #fff 上是不是真够清晰——很多“看不见的边框”，其实是被系统强制降对比度吃掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
