li设width:100%未撑满父容器，因默认display:list-item不继承宽度且受ul默认padding-left挤压；需重置ul内边距、li设display:block并box-sizing:border-box防文字撑宽。
列表项 width: 100% 为什么没撑满父容器？
常见现象是给 li 写了 width: 100%，但实际宽度仍窄于容器——根本原因是默认 display: list-item 的 li 不继承父级 width，且受 ul 的 padding-left（浏览器默认值通常为 40px）挤压。
- 必须重置
ul的内边距：ul { padding: 0; margin: 0; } -
li需显式设为块级：li { display: block; width: 100%; }（仅靠width: 100%不够） - 若
ul是 flex 容器，li默认会收缩，需加flex: 1或flex-grow: 1
媒体查询中怎么让列表在小屏变单列、大屏变多列？
不能只靠 width: 100%，得配合布局模型切换。用 flex 最直接，避免浮动或 inline-block 的间隙和对齐问题。
- 小屏（如手机）：强制单列，
ul { flex-direction: column; } - 大屏（如桌面）：设为横向流式多列，
ul { flex-direction: row; flex-wrap: wrap; } - 控制每行数量：用
li { flex: 0 0 calc(50% - 8px); }实现两列（减去间距），calc(33.333% - 12px)对应三列 - 注意：百分比计算要预留
gap或margin，否则换行错乱
用 CSS Grid 做响应式列表更简洁吗？
是的，Grid 天然适合等宽网格布局，媒体查询只需改 grid-template-columns，不用动 li 样式。
- 基础写法：
ul { display: grid; gap: 12px; } - 小屏：
@media (max-width: 768px) { ul { grid-template-columns: 1fr; } } - 中屏：
@media (min-width: 769px) and (max-width: 1024px) { ul { grid-template-columns: repeat(2, 1fr); } } - 大屏：
@media (min-width: 1025px) { ul { grid-template-columns: repeat(4, 1fr); } } - 兼容性注意：IE11 不支持
gap，需回退用margin模拟，且repeat(auto-fit, minmax(...))在旧版 Safari 有渲染 bug
为什么加了 width: 100% 还是被文字撑宽？
这是盒模型 + 内容流共同作用的结果。width: 100% 只约束 content box，但 padding、border、长单词/URL 会突破限制。
- 务必加
box-sizing: border-box到li，否则 padding/border 额外加宽 - 防文字溢出：
li { word-break: break-word; }或overflow-wrap: break-word; - 避免固定高度导致内容裁剪，优先用
min-height或弹性高度 - 如果用了
white-space: nowrap，width: 100%会完全失效，必须配合overflow: hidden或text-overflow: ellipsis
事情说清了就结束。真正卡住的往往不是媒体查询本身，而是默认样式、盒模型和文本换行这三处细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
