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

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

基础 HTML 结构

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

` 包含一个 `` 标签：

• 网站一
• 网站二
• 网站三

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

给 `

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

` 设置 `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` 实现换行，避免溢出

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！