友情链接横向排列需用CSS覆盖li默认垂直样式：方法一设li为inline或inline-block；方法二将ul设为flex容器并清除列表默认样式，推荐现代Flex方案。

用 HTML 列表标签制作横向排列的友情链接，核心是用 <ul> 和 <li> 构建结构，再通过 CSS 控制显示方式为 inline 或 flex。默认情况下 <li> 是垂直堆叠的，必须覆盖默认样式才能横排。

基础 HTML 结构

先写一个标准的无序列表，每个 `

` 包含一个 `` 标签：

<ul class="friend-links">
  <li><a href="https://www.php.cn/link/b70b811e9b057d7ab5ea48f0d0b12d79">网站一</a></li>
  <li><a href="https://site2.com">网站二</a></li>
  <li><a href="https://site3.com">网站三</a></li>
</ul>

方法一：用 display: inline（简洁轻量）

给 `

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

` 设置 `display: inline` 或 `inline-block`，就能让它们并排显示：

.friend-links li {
  display: inline;
}
/* 或者加点间距 */
.friend-links li + li {
  margin-left: 15px;
}

• 用 `inline` 时，`width`/`height`/`margin-top/bottom` 无效，适合纯文字链接
• 用 `inline-block` 可设宽高和上下边距，更灵活，推荐用于带图标或固定尺寸的链接

方法二：用 Flex 布局（现代推荐）

给 `

` 设为 flex 容器，一行内均匀排列，控制对齐和间距更方便：

立即学习“前端免费学习笔记（深入）”；

.friend-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.friend-links li {
  margin-right: 20px;
}
.friend-links li:last-child {
  margin-right: 0;
}

• 去掉默认列表符号用 `list-style: none`
• 清除内外边距避免意外偏移
• 用 `margin-right` 控制间隔，最后一项取消右距保持整齐

补充建议

实际使用中注意几点：

• 链接目标最好加 `target="_blank"` 和 `rel="noopener"` 提升安全性
• 为 `` 加 `text-decoration: none` 去掉下划线，更符合友情链接视觉习惯
• 小屏幕可配合 `flex-wrap: wrap` 实现换行，避免溢出