利用CSS Flexbox实现水平标签式导航列表-html教程-PHP中文网

利用CSS Flexbox实现水平标签式导航列表

DDD

发布： 2025-11-21 12:42:17

原创

264人浏览过

利用css flexbox实现水平标签式导航列表

本教程详细介绍了如何使用纯CSS将传统的无序列表（ul li）转换为现代、水平的标签式导航菜单。通过运用Flexbox布局、选择器和基本样式属性，我们将实现列表项的水平排列、标签式外观以及活动状态的高亮显示，确保链接功能正常且界面美观。

1. 教程目标与基本HTML结构

我们的目标是将一个标准的HTML无序列表（<ul>）及其列表项（<li>）转换为一系列水平排列的、具有标签风格的导航链接。这种布局常见于网站的顶部导航或二级菜单。

首先，我们需要一个语义化的HTML结构。每个导航项都应该是一个列表项（<li>），内部包含一个链接（<a>）。

<ul class="tabbies">
  <li class="active"><a href="https://heram-iam.myshopify.com/pages/important-legal-notice">重要法律声明</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/riding-policy">骑行政策</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/website-terms-of-use">网站使用条款</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/privacy-policy">隐私政策</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/non-discrimination-policy">非歧视政策</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/returns-policy">退款政策</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/cookie-policy">Cookie政策</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/disclaimer">免责声明</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/gdpr-compliance">GDPR</a></li>
  <li><a href="https://heram-iam.myshopify.com/pages/ccpa-opt-out">CCA选择退出</a></li>
</ul>

登录后复制

请注意，我们为 <ul> 元素添加了 tabbies 类，以便进行特定的CSS样式控制。同时，为了演示活动状态，第一个 <li> 元素被赋予了 active 类。

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

2. 核心CSS样式实现

接下来，我们将使用纯CSS来美化和布局这个列表。我们将主要利用Flexbox来实现水平排列，并对列表项和链接进行样式调整，使其看起来像可点击的标签。

2.1 重置默认列表样式

浏览器通常会对 <ul> 和 <li> 元素应用默认的样式，例如项目符号和内边距。我们需要先将它们重置。

ul,
li {
  list-style-type: none; /* 移除列表项的项目符号 */
  padding-inline-start: 0; /* 移除 ul/ol 默认的左内边距 */
}

登录后复制

2.2 使用Flexbox布局实现水平排列

为 ul.tabbies 容器应用Flexbox布局，使其内部的 <li> 元素水平排列。

ul.tabbies {
  display: flex; /* 启用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许列表项在空间不足时换行 */
  max-width: 900px; /* 设置最大宽度，防止过宽 */
  margin: auto; /* 居中显示整个导航列表 */
}

登录后复制

display: flex; 是实现水平布局的关键。
flex-wrap: wrap; 确保当屏幕宽度不足以容纳所有标签时，它们能够优雅地换行，这对于响应式设计非常重要。
max-width 和 margin: auto; 用于将整个标签组居中并限制其宽度。

2.3 样式化列表项（<li>）

现在，我们将为每个 <li> 元素添加标签的视觉效果。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

li {
  padding-bottom: 1em; /* 底部内边距，为边框留出空间 */
  border-bottom: solid #e1e1e1 1px; /* 默认底部边框 */
  text-align: center; /* 文本居中 */
  min-width: fit-content; /* 宽度适应内容 */
  padding-right: 2em; /* 右侧内边距 */
  padding-top: 1em; /* 顶部内边距 */
}

li:hover {
  border-bottom: solid #000 1px !important; /* 鼠标悬停时底部边框变粗变色 */
}

登录后复制

padding 属性用于控制标签的内部空间。
border-bottom 创建了标签底部的线条效果。
min-width: fit-content; 确保每个标签的宽度至少能容纳其内容。
li:hover 伪类提供了鼠标悬停时的视觉反馈，通常用于指示可点击性。!important 在这里用于确保覆盖其他可能的边框样式，但通常应谨慎使用。

2.4 样式化链接（<a>）

链接是用户实际点击的部分，需要去除默认的下划线并调整颜色。

a {
  font-size: 15px; /* 字体大小 */
  text-decoration: none; /* 移除链接下划线 */
  color: #000; /* 默认链接颜色 */
}

登录后复制

2.5 样式化活动标签（li.active）

活动标签（当前选中的页面或功能）通常需要有不同的样式来突出显示。

li.active {
  border-bottom-color: #c70000; /* 活动标签的底部边框颜色 */
}

li.active > a {
  color: #c70000; /* 活动标签内链接的文本颜色 */
}

登录后复制

li.active 选择器直接作用于具有 active 类的 <li> 元素，改变其底部边框颜色。
li.active > a 选择器则精确地选中活动 <li> 内部的 <a> 元素，改变其文本颜色。

2.6 额外底部边框处理 (可选)

原始问题中有一个特殊的 nth-child 样式，用于在特定数量的 li 之后添加一个延伸的底部边框。这通常是为了视觉上连接所有标签下方的线条。

li:nth-child(9)~li:after {
  content: "";
  position: absolute;
  max-width: 535px;
  margin-left: auto;
  margin-right: 12em;
  width: 100%;
  padding-top: 2.6em;
  border-bottom: solid 1px #e1e1e1;
}

登录后复制

这个规则相对复杂，它在第9个 <li> 元素之后的所有 <li> 元素后面插入一个伪元素，并为其添加一个底部边框。这可以用于填充标签组右侧的空白区域，使其底部线条看起来是连续的。在实际应用中，这种特定的需求可能需要根据具体布局进行调整。

3. 完整CSS代码

将以上所有CSS规则组合起来，即可形成完整的样式表。

/* 重置默认列表样式 */
ul,
li {
  list-style-type: none;
  padding-inline-start: 0;
}

/* Flexbox布局容器 */
ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  margin: auto;
}

/* 列表项（标签）样式 */
li {
  padding-bottom: 1em;
  border-bottom: solid #e1e1e1 1px;
  text-align: center;
  min-width: fit-content;
  padding-right: 2em;
  padding-top: 1em;
}

/* 列表项悬停样式 */
li:hover {
  border-bottom: solid #000 1px !important;
}

/* 链接样式 */
a {
  font-size: 15px;
  text-decoration: none;
  color: #000;
}

/* 活动标签样式 */
li.active {
  border-bottom-color: #c70000;
}

li.active > a {
  color: #c70000;
}

/* 额外的底部边框处理（可选） */
li:nth-child(9)~li:after {
  content: "";
  position: absolute;
  max-width: 535px;
  margin-left: auto;
  margin-right: 12em;
  width: 100%;
  padding-top: 2.6em;
  border-bottom: solid 1px #e1e1e1;
}

登录后复制

4. 总结与注意事项

通过本教程，我们成功地将一个简单的HTML无序列表转换成了一个功能完善、外观专业的水平标签式导航菜单。

关键点回顾：

语义化HTML： 使用 <ul> 和 <li> 结构保持内容的语义性。
Flexbox布局： display: flex; 和 flex-wrap: wrap; 是实现水平排列和响应式换行的核心。
样式重置： 移除浏览器默认样式是确保一致外观的第一步。
精确选择器： 使用 ul.tabbies、li、a 以及 li.active 等选择器来精确定位和样式化元素。
交互反馈： li:hover 为用户提供了视觉上的交互提示。
活动状态： li.active 和 li.active > a 用于清晰地标识当前选中的导航项。

注意事项：

CSS预处理器： 原始问题中使用了Sass/SCSS等预处理器，本教程采用纯CSS解决方案，具有更广泛的兼容性。如果您正在使用预处理器，可以将这些纯CSS规则整合到您的预处理器文件中。
响应式设计： flex-wrap: wrap; 已经提供了基本的响应能力，但在更复杂的场景中，可能需要结合媒体查询（@media）来优化不同屏幕尺寸下的布局和字体大小。
可访问性： 确保导航链接具有清晰的焦点状态（a:focus），并考虑为屏幕阅读器提供额外的辅助文本，以提升用户体验。
样式冲突： 如果您的项目中已经存在其他CSS规则，请注意选择器的特异性，避免不必要的样式冲突。在必要时，可以使用更具体的选择器或 !important（但请谨慎使用）。

以上就是利用CSS Flexbox实现水平标签式导航列表的详细内容，更多请关注php中文网其它相关文章！