推荐用语义化 结构，配合 display: flex 实现横向排列，响应式时改 flex-direction: column，避免 float 和 display: block 干扰。
友情链接用
决定排列逻辑HTML5 本身不规定友链怎么排，真正起作用的是 CSS。但结构选错，后续改样式会多绕两步。推荐统一用语义化写法：
不用 堆砌，否则无法用 :nth-child 或语义化选择器精准控制单个链接。横向排列加 display: flex 最稳，别碰 float
老模板常用 float: left 实现横排，但在 Flexbox 普及后已成隐患：父容器高度塌陷、响应式断点错乱、IE10+ 兼容性差。直接上现代方案：
.friend-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.friend-links li {
margin: 0;
}
.friend-links a {
display: block;
padding: 4px 12px;
font-size: 14px;
}
-
gap 替代 margin 控制间距，避免首尾外边距干扰
- 去掉
li 默认上下 margin，防止垂直方向意外撑高
- 若需等宽分布（如 4 个链接占满一行），加
flex: 1 到 a 或用 justify-content: space-between
竖排变横排时，检查是否被 display: block 锁死
很多模板默认给 a 标签设了 display: block 并设了固定宽高，导致即使加了 flex 也挤不下。排查顺序：
- 打开浏览器开发者工具，选中一个友链
display 是否为 block
- 查 CSS 文件中是否有类似
.friend-links a { display: block; width: 120px; } 的规则
- 覆盖它：
.friend-links a {
display: inline-block; /* 或直接删掉 display 声明 */
width: auto;
max-width: none;
}
响应式折行要在 @media 里重置 flex-direction，不是删 flex
手机端想变竖排？别在媒体查询里写 display: block，那会破坏整个 Flex 布局流。正确做法是保持 flex，只改方向：
@media (max-width: 768px) {
.friend-links {
flex-direction: column;
gap: 8px;
}
}
- 用
column 而非 row，确保自然从上到下排列
-
gap 值可比桌面端小些，节省竖向空间
- 如果竖排后文字过长换行难看，给
a 加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
实际改的时候，最常卡在 CSS 层叠优先级上——某个第三方插件或主题 CSS 用 !important 锁死了 display，得用更具体的选择器或提高权重才能覆盖。
决定排列逻辑
HTML5 本身不规定友链怎么排，真正起作用的是 CSS。但结构选错，后续改样式会多绕两步。推荐统一用语义化写法：
不用 堆砌，否则无法用 :nth-child 或语义化选择器精准控制单个链接。横向排列加 display: flex 最稳，别碰 float
老模板常用 float: left 实现横排，但在 Flexbox 普及后已成隐患：父容器高度塌陷、响应式断点错乱、IE10+ 兼容性差。直接上现代方案：
.friend-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.friend-links li {
margin: 0;
}
.friend-links a {
display: block;
padding: 4px 12px;
font-size: 14px;
}
-
gap 替代 margin 控制间距，避免首尾外边距干扰
- 去掉
li 默认上下 margin，防止垂直方向意外撑高
- 若需等宽分布（如 4 个链接占满一行），加
flex: 1 到 a 或用 justify-content: space-between
竖排变横排时，检查是否被 display: block 锁死
很多模板默认给 a 标签设了 display: block 并设了固定宽高，导致即使加了 flex 也挤不下。排查顺序：
- 打开浏览器开发者工具，选中一个友链
display 是否为 block
- 查 CSS 文件中是否有类似
.friend-links a { display: block; width: 120px; } 的规则
- 覆盖它：
.friend-links a {
display: inline-block; /* 或直接删掉 display 声明 */
width: auto;
max-width: none;
}
响应式折行要在 @media 里重置 flex-direction，不是删 flex
手机端想变竖排？别在媒体查询里写 display: block，那会破坏整个 Flex 布局流。正确做法是保持 flex，只改方向：
@media (max-width: 768px) {
.friend-links {
flex-direction: column;
gap: 8px;
}
}
- 用
column 而非 row，确保自然从上到下排列
-
gap 值可比桌面端小些，节省竖向空间
- 如果竖排后文字过长换行难看，给
a 加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
实际改的时候，最常卡在 CSS 层叠优先级上——某个第三方插件或主题 CSS 用 !important 锁死了 display，得用更具体的选择器或提高权重才能覆盖。
