本教程旨在指导开发者如何将传统的垂直项目符号列表（<ul><li>）转换为现代、响应式的水平标签式导航样式。通过纯css，我们将详细讲解如何利用flexbox布局、重置默认样式以及管理元素的悬停和激活状态，以构建功能完善且视觉吸引力的导航菜单，确保链接的可用性。
1. 引言：从列表到导航标签
在网页设计中，将普通的无序列表（<ul><li>）转换为美观且功能性的水平导航标签是一种常见需求。这不仅能提升用户体验，还能使页面布局更加整洁。本教程将通过纯CSS的方法，一步步实现将一个标准的HTML列表转换为具有标签风格的水平导航，同时确保所有链接都能正常工作。我们将避免使用复杂的预处理器指令，专注于纯CSS的简洁和高效。
2. HTML结构
首先，我们需要一个标准的HTML无序列表作为基础。每个列表项（<li>）内包含一个链接（<a>），并且为了方便CSS选择器进行样式控制，我们在<ul>元素上添加一个类名，例如 tabbies。
<ul class="tabbies"> <li class="active"><a href="https://heram-iam.myshopify.com/pages/important-legal-notice">Important Legal Notice</a></li> <li><a href="https://heram-iam.myshopify.com/pages/riding-policy">Riding Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/website-terms-of-use">Website Terms of Use</a></li> <li><a href="https://heram-iam.myshopify.com/pages/privacy-policy">Privacy Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/non-discrimination-policy">Non-Discrimination Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/returns-policy">Refund Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/cookie-policy">Cookie Policy</a></li> <li><a href="https://heram-iam.myshopify.com/pages/disclaimer">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 Opt-out</a></li> </ul>
注意，我们为当前激活的标签添加了 active 类，以便后续应用特定的样式。
3. CSS样式实现
接下来，我们将逐步构建CSS样式，实现导航标签的布局和视觉效果。
立即学习“前端免费学习笔记（深入）”；
3.1 重置默认列表样式
浏览器通常会为<ul>和<li>元素应用默认的边距、填充和列表项标记。为了获得干净的基准，我们需要重置这些样式。
ul,
li {
list-style-type: none; /* 移除列表项标记 */
padding-inline-start: 0; /* 移除默认的左内边距 */
}3.2 实现水平布局（Flexbox）
使用Flexbox是实现水平布局最现代和灵活的方法。我们将display: flex应用于<ul>元素，并结合flex-wrap: wrap允许标签在空间不足时换行。
ul.tabbies {
display: flex; /* 启用Flexbox布局 */
flex-wrap: wrap; /* 允许项目换行 */
max-width: 900px; /* 限制导航的最大宽度 */
margin: auto; /* 居中显示 */
}3.3 样式化列表项（<li>）
每个<li>元素将代表一个独立的标签。我们将为其添加内边距、底部边框和文本对齐方式，以模拟标签的外观。min-width: fit-content确保标签内容完全显示。
li {
padding-bottom: 1em; /* 底部内边距 */
border-bottom: solid #e1e1e1 1px; /* 默认底部边框 */
text-align: center; /* 文本居中 */
min-width: fit-content; /* 根据内容自适应最小宽度 */
padding-right: 2em; /* 右侧内边距 */
padding-top: 1em; /* 顶部内边距 */
}3.4 样式化链接（<a>）
链接文本的样式也很重要。我们将移除默认的下划线，设置字体大小和颜色。
a {
font-size: 15px; /* 字体大小 */
text-decoration: none; /* 移除下划线 */
color: #000; /* 默认链接颜色 */
}3.5 添加交互效果：悬停和激活状态
为了提升用户体验，我们需要为标签添加悬停（:hover）和激活（.active）状态的样式。
li:hover {
border-bottom: solid #000 1px !important; /* 悬停时底部边框变色 */
}
li.active {
border-bottom-color: #c70000; /* 激活状态底部边框颜色 */
}
li.active > a {
color: #c70000; /* 激活状态链接文本颜色 */
}通过!important可以确保悬停效果的优先级高于其他可能存在的样式。
3.6 优化底部边框的连续性（高级技巧）
当标签数量较多，且不能完全填满一行时，可能会出现底部边框不连续的情况。以下CSS规则通过伪元素在特定位置添加一个额外的底部边框，以确保视觉上的连续性。这个规则针对的是从第九个<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; /* 底部边框 */
}注意： 这种 nth-child 结合 ~ (通用兄弟选择器) 的伪元素技巧是针对特定布局和内容数量的优化。在实际项目中，可能需要根据具体情况调整 nth-child 的索引、max-width 和 margin 值，以确保边框的无缝连接。对于更通用的解决方案，可以考虑在ul上设置一个统一的底部边框，然后让li的底部边框覆盖它。
4. 完整CSS代码
将上述所有CSS片段组合起来，形成完整的样式表：
/* 重置默认样式 */
ul,
li {
list-style-type: none;
padding-inline-start: 0;
}
/* 导航容器样式 */
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;
}5. 注意事项与总结
- Flexbox的强大： display: flex和flex-wrap: wrap是实现此类布局的关键。它们提供了极大的灵活性和响应性。
- 样式重置： 始终从重置浏览器默认样式开始，以确保跨浏览器的一致性。
- 语义化HTML： 保持HTML结构清晰和语义化，有助于CSS的编写和未来的维护。
- 激活状态： 通过添加.active类来管理当前选中标签的样式，是实现动态导航的常见做法。
- 特定布局优化： li:nth-child(9)~li:after 这样的规则是针对特定布局问题的解决方案。在实际应用中，应根据项目需求和内容动态调整或寻找更通用的方法。例如，如果导航项数量不固定，这种硬编码的nth-child可能不适用。
- 可访问性： 确保链接具有足够的对比度，并且在键盘导航时有焦点指示。
通过本教程，您应该已经掌握了如何使用纯CSS将普通的无序列表转换为功能完善且视觉吸引力的水平标签式导航。这种方法不仅简洁高效，而且易于理解和维护，是前端开发中的一项实用技能。
