推荐用语义化 <nav><ul><li> 结构，配合 display: flex 实现横向排列，响应式时改 flex-direction: column，避免 float 和 display: block 干扰。
友情链接用 <ul><li> 还是 <div> 决定排列逻辑
HTML5 本身不规定友链怎么排，真正起作用的是 CSS。但结构选错，后续改样式会多绕两步。推荐统一用语义化写法：
<nav aria-label="友情链接">
<ul class="friend-links">
<li><a href="https://a.com">网站A</a></li>
<li><a href="https://b.com">网站B</a></li>
</ul>
</nav>不用 <div> 堆砌，否则无法用 :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 也挤不下。排查顺序：
- 打开浏览器开发者工具，选中一个友链
<a>，看 computed 样式里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，得用更具体的选择器或提高权重才能覆盖。
