本教程详细介绍了如何使用纯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> 元素添加标签的视觉效果。
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（但请谨慎使用）。
