CSS实现水平标签式导航：UL LI列表样式优化教程

<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>

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

ul.tabbies {
  display: flex; /* 启用Flexbox布局 */
  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; /* 顶部内边距 */
}

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

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

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; /* 底部边框 */
}

/* 重置默认样式 */
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;
}