友情链接应使用 ul + li 布局，语义正确、兼容性好、便于响应式控制；推荐用 display: grid 实现多列，避免 float 或 inline-block 缺陷，通过 grid-template-columns 和媒体查询实现列数自适应。
友情链接用 ul 和 li 布局最稳妥
直接套用表格或浮动容易在响应式下错位，ul + li 是语义正确、兼容性好、CSS 控制灵活的基础结构。每个链接用一个 li，避免把多个链接塞进同一个 li 里——那样会破坏列表语义，也增加 CSS 选择难度。
示例结构：
<footer><div class="footer-links">
<h4>友情链接</h4>
<ul>
<li><a href="https://example1.com">网站一</a></li>
<li><a href="https://example2.com">网站二</a></li>
<li><a href="https://example3.com">网站三</a></li>
<!-- 更多 li -->
</ul>
</div>
</footer>
用 display: grid 实现多列，别碰 float
float 已淘汰，容易导致父容器高度塌陷；inline-block 有空白符问题；flex 单行撑满后换行控制麻烦。而 grid 能精准指定列数、自动分配项、响应式友好。
关键 CSS：
.footer-links ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5em;
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin: 0;
}
-
repeat(4, 1fr)表示默认 4 列等宽；改成repeat(3, 1fr)就是 3 列 - 用
@media降级：比如屏幕宽度 repeat(2, 1fr)，再小就1fr - 注意
gap比margin更可靠——它不触发外边距合并，也不受li内联特性干扰
链接样式要加 text-decoration: none 和 hover 效果
默认下划线在底部区域很突兀，且没 hover 提示会让用户不确定是否可点。必须显式重置，并提供视觉反馈。
建议写法：
.footer-links a {
color: #666;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: #007bff;
text-decoration: underline;
}
- 不要只改
color，hover 时加text-decoration: underline才符合用户预期 - 避免用
!important强覆盖浏览器默认样式，优先靠选择器权重和声明顺序解决 - 如果链接文字过长，加
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;防止换行撑乱网格
移动端列数太少时，别硬撑，用 grid-auto-flow: column 改方向
当屏幕窄到只够放 1–2 个链接时，横向铺开反而需要左右滚动，体验差。此时更适合让链接竖排，节省水平空间。
做法是切换 grid 流向：
@media (max-width: 480px) {
.footer-links ul {
grid-template-columns: 1fr;
grid-auto-flow: column;
}
}
-
grid-auto-flow: column让新项按列填充（即从上到下），配合grid-template-columns: 1fr实现单列流式布局 - 不用
flex-direction: column是因为已用 grid，没必要切回 flex；保持渲染逻辑统一 - 这个技巧常被忽略——很多人只调列数，却不改流向，结果小屏出现超宽容器或溢出
实际排版效果取决于链接数量是否能被列数整除，余项会自动填满最后一行。如果链接特别少（比如只有 3 个却设了 4 列），空列不会显示，grid 本身不生成占位元素——这点比 table 安全得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
