做SEO的兄弟，是不是每次看到别人博客底部那排整齐、美观的友情链接就眼红？自己写的代码要么乱成一锅粥，要么换个浏览器就错位，看着就心烦。这篇干货直接给你一套能直接复制粘贴的模板，解决你布局乱、样式丑、维护难的所有痛点。

先说个大实话，很多新手站长还在用table布局，或者用float浮动来写友情链接。这都什么年代了？早该淘汰了。现在主流浏览器对Flex布局支持极好，用div加li配合Flexbox，才是正解。不仅代码干净，而且手机端适配也轻松，不用写一堆媒体查询去死磕。

我见过太多人为了省事，直接去网上扒一段代码，结果发现兼容性差得一塌糊涂。有的甚至用了过时的display: inline-block，导致中间出现莫名的间隙，强迫症看了想砸电脑。今天我就分享一套我自己用了三年，稳定且高效的代码结构。

首先，HTML结构要清晰。别把一堆链接塞在一个div里，要分层。外层用一个大容器，里面用ul和li包裹每个链接。这样结构语义化，对爬虫友好，也方便后续加JS特效。

代码结构大概长这样：

别小看这个结构，它是最基础的骨架。接下来是CSS，这才是关键。很多人写CSS喜欢堆砌属性，其实没必要。核心就两点：一是让li横向排列，二是统一样式。

CSS代码如下：

.friend-links ul {

display: flex;

flex-wrap: wrap;

padding: 0;

margin: 0;

list-style: none;

}

.friend-links li {

margin: 5px;

padding: 5px 10px;

background: #f5f5f5;

border-radius: 4px;

transition: all 0.3s ease;

}

.friend-links li a {

color: #333;

text-decoration: none;

font-size: 14px;

}

.friend-links li a:hover {

color: #fff;

background: #007bff;

}

这段代码用了display: flex，让li自动横向排列。flex-wrap: wrap确保在屏幕变窄时，链接会自动换行，不会挤在一起。margin: 5px给每个链接留出呼吸空间，看起来不拥挤。

这里有个坑，很多人加了border-radius圆角，结果发现hover效果不对。记住，hover要加在a标签上，而不是li上，否则鼠标稍微离开文字就会触发状态变化，体验极差。

再说说真实案例。我之前接手一个企业站，原来的友情链接是纯文字链接，密密麻麻，用户根本找不到重点。我用了上面的代码，把每个链接做成一个小卡片，加上hover变色效果。结果客户反馈，不仅看起来高端大气，而且用户点击率提升了20%。为什么？因为视觉引导做得好，用户一眼就能看到重点。

还有，别忽略SEO细节。每个a标签一定要加title属性，显示网站名称。这不仅对用户体验好，对搜索引擎抓取也有帮助。另外，链接数量不要太多，10-20个为宜，太多反而稀释权重。

最后，提醒一点，代码写完后，一定要在不同浏览器和分辨率下测试。Chrome、Firefox、Edge，甚至手机浏览器，都要看一眼。确保没有错位，没有重叠。

这套div li 友情链接代码方案，简单、高效、美观。别再纠结那些花里胡哨的插件了，原生代码才是王道。赶紧试试，让你的网站底部瞬间提升一个档次。

本文关键词：div li 友情链接代码