列表项首行缩进不一致，主因是list-style-position: outside使符号位于内容盒外，导致文本左边缘视觉错位；应统一设list-style-position: inside或用padding-left+text-indent组合精准控制缩进。
用 <ul> 和 <ol> 时，列表项首行缩进不一致？
默认情况下，<ul> 和 <ol> 的 list-style-position 是 outside，项目符号（如圆点、数字）画在内容盒外部，导致文本左边缘实际不对齐。尤其当列表项换行时，第二行会“悬垂”到符号左侧，视觉上歪斜。
解决方法是强制符号内嵌：
ul, ol {
list-style-position: inside;
}但要注意：inside 会让符号参与行内排版，可能挤压第一行文字空间；若列表项含多段落或复杂结构，inside 还可能引发换行错位。更稳的方案是保留 outside，改用 padding-left 统一控制文本起始位置：
ul, ol {
padding-left: 2em; /* 覆盖浏览器默认值 */
}
li {
text-indent: -1em; /* 把符号“拉回”左边距内 */
padding-left: 1em; /* 补出文字正常缩进 */
}表格型列表用 <dl> 怎么让 <dt> 和 <dd> 左对齐？
<dl> 天然不是为对齐设计的，<dt> 默认加粗且无缩进，<dd> 默认有 margin-left，二者基线和起始位置都不一致。
立即学习“前端免费学习笔记（深入）”；
常见错误是直接给 <dd> 设 margin-left: 0，结果 <dt> 和 <dd> 文字左缘看似对齐，但 <dt> 的字体粗细和行高会让视觉重心偏上，仍显“错开”。真正对齐需同步控制三处：
- 清除
<dd>默认外边距：margin-left: 0 - 统一
<dt>和<dd>的display（建议都设为inline或inline-block） - 用
vertical-align: top对齐基线
例如：
dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0 1em;
}
dt {
font-weight: normal;
margin: 0;
}
dd {
margin: 0;
align-self: start;
}纯 CSS 实现多列对齐列表（不用表格），flex 还是 grid？
如果列表项本身是扁平结构（比如导航链接、标签云），想横向等宽或按需分配空间，flex 更轻量；但如果要严格控制行列对应（如“标题-值”成对排列），grid 的显式轨道更可靠。
flex 容易踩的坑：
-
flex-wrap: wrap后，末行项目可能因剩余空间不足而被压缩，需配合flex-basis固定最小宽度 - 不同内容长度会导致高度不一，用
align-items: stretch反而暴露对齐问题
grid 更适合对齐场景：
.list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.5em;
}
.list-grid > * {
align-self: start; /* 避免文字多时底部参差 */
}用 <ul> 做菜单时，如何让文字和图标垂直居中对齐？
常见写法是 <li><i class="icon"></i> 文本</li>，但 <i> 默认是 inline 元素，baseline 对齐导致图标和文字上下错位。
最简解法：给图标加 vertical-align: middle，但仅对小图标有效；若图标是 SVG 或字体图标，推荐统一用 display: inline-flex：
li {
display: inline-flex;
align-items: center;
gap: 0.3em;
}注意两点：
- 别只给图标设
vertical-align，要整体控制容器的对齐方式 - 如果菜单项有 hover 下划线，
inline-flex容器的text-decoration不会自动延伸到图标，需额外处理text-underline-offset
对齐这事，表面是像素级调整，背后其实是盒模型、行内格式化上下文和渲染层叠顺序的综合体现。越想“完美对齐”，越要先确认当前元素的 display 类型和父容器的布局模式——否则调半天 margin，其实只是在掩盖根本没对齐的起点。
