CSS如何制作类似于导航条下平分空间的选项

最稳做法是父容器设 display: flex，子项设 flex: 1；需确保父容器有明确宽度，子项不设 width/min-width，图标用 flex-shrink: 0，文字截断用 overflow:hidden+text-overflow:ellipsis+white-space:nowrap 控制在内容层。 用 让导航项等宽平分容器 直接给父容器加 ，再配 给每个子项，是最稳、最通用的做法。它不依赖项数，也不怕文字长短差异，浏览器兼容性从 Chrome 29 / Firefox 20 / Safari 6.1 起就完全 OK。 常见错误是只加 却忘了设子项的伸缩行为——结果所有项按内容宽度挤在一起，根本没“平分”。 父元素必须有明确宽度（比如 或固定值），否则 flex 容器可能收缩得比内容还小 子项别设 或 ，否则会干扰 的均分逻辑 如果导航项里有图标或 badge，用 保它们不被压缩，但主体文字部分仍要留出弹性空间 遇到 导致换行失效？先检查这个 很多导航条默认加了 防止文字折行，但这会让长文本撑开整个 flex 项，破坏等宽效果。不是 bug，是 CSS 层叠的正常表现。 解决方法很简单：在子项内部的文字容器（比如 或链接内文字）上加 + + ，把截断控制在内容层，而不是让整块 flex 项扛住宽度。 立即学习 “ 前端免费学习笔记（深入） ”； 别在 flex 子项上直接写 ，会切掉图标或下拉箭头 如果要用省略号，必须同时设 或 ，否则 不生效 移动端小屏下建议配合 动态缩放文字，避免溢出 能不能替代 flex？ 能，但没必要。CSS Grid 的 确实可以实现响应式等分，但它本质是“尽可能多列”，而导航条通常是固定项数（比如 4 个菜单）、要求严格等宽。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 用 Grid 容易踩的坑：当容器宽度不足以放下最小列宽时，列数会减少，导致最后一项突然变宽；而 flex 下所有项始终共担剩余空间，视觉更稳定。 Grid 更适合卡片列表、工具栏这类“数量不固定”的场景 如果硬要用 Grid 做导航，得配合 和显式列数（如 ），反而失去响应优势 IE11 对 支持极差，flex 则无此问题 JavaScript 动态计算宽度？多数时候是画蛇添足 有人用 JS 获取容器宽度、除以项数、再赋值给每个 ，这在 window resize 时极易出错：重排触发频繁、无法响应字体加载、SSR 下取不到真实 DOM 尺寸。 现代 CSS 已经足够可靠。只有两个真实需要 JS 的例外：需要兼容 IE9 及更老版本；或者导航项高度必须严格对齐（比如带底边框的激活态），而 flex 的基线对齐有细微偏差。 若真要用 JS，优先监听 + ，别每次触发都重算 避免用 在循环里反复调用，改用 （Chrome 64+） 绝大多数项目，删掉那几十行 JS，换成三行 CSS，反而更健壮 真正难的不是怎么分，而是分完之后 hover 状态、焦点管理、键盘导航、屏幕阅读器语义这些地方容易被忽略——尤其是用 后，有些旧版辅助技术会把整条导航读成一个大按钮。