使用CSS将无序列表转换为横向标签式导航

<ul class="tabbies">
  <li class="active"><a href="#!">重要法律声明</a></li>
  <li><a href="#!">骑行政策</a></li>
  <li><a href="#!">网站使用条款</a></li>
  <li><a href="#!">隐私政策</a></li>
  <li><a href="#!">非歧视政策</a></li>
  <li><a href="#!">退款政策</a></li>
  <li><a href="#!">Cookie政策</a></li>
  <li><a href="#!">免责声明</a></li>
  <li><a href="#!">GDPR 合规性</a></li>
  <li><a href="#!">CCA 选择退出</a></li>
</ul>

/* 重置默认列表样式 */
ul, li {
  list-style-type: none; /* 移除项目符号 */
  padding: 0;            /* 移除默认内边距 */
  margin: 0;             /* 移除默认外边距 */
}

/* 基础样式和Flexbox布局 */
ul.tabbies {
  display: flex;             /* 启用Flexbox布局 */
  flex-wrap: wrap;           /* 允许标签在空间不足时换行 */
  justify-content: flex-start; /* 标签从容器的起始位置开始排列 */
  max-width: 900px;          /* 可选：限制容器最大宽度 */
  margin: 20px auto;         /* 可选：居中容器并提供上下外边距 */
  border-bottom: solid 1px #e1e1e1; /* 为整个标签栏添加底部边框 */
  padding-bottom: 0;         /* 确保底部边框紧贴标签 */
}

/* 样式化单个标签项 */
ul.tabbies li {
  padding: 10px 20px;        /* 标签内部的内边距 */
  text-align: center;        /* 文本居中 */
  cursor: pointer;           /* 鼠标悬停时显示手型光标 */
  margin-bottom: -1px;       /* 向上移动1px，使标签的底部边框覆盖ul的基线 */
  white-space: nowrap;       /* 防止标签文本换行 */
  box-sizing: border-box;    /* 确保padding和border不增加元素总宽度 */
}

/* 样式化标签链接 */
ul.tabbies li a {
  text-decoration: none;     /* 移除下划线 */
  color: #000;               /* 默认链接颜色 */
  font-size: 15px;           /* 字体大小 */
  display: block;            /* 使整个padding区域可点击 */
}

/* 悬停状态 */
ul.tabbies li:hover {
  border-bottom: solid 1px #000; /* 悬停时底部边框变深 */
  /* color: #000; /* 悬停时文本颜色，如果a标签有自己的颜色，可能需要单独设置a:hover */
}

ul.tabbies li:hover a {
  color: #000; /* 悬停时链接文本颜色 */
}

/* 激活状态 */
ul.tabbies li.active {
  border-bottom: solid 1px #c70000; /* 激活时底部边框为红色 */
  /* color: #c70000; /* 激活时文本颜色 */
}

ul.tabbies li.active a {
  color: #c70000; /* 确保激活状态的链接文本为红色 */
}

/* Reset default list styles */
ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Base styles for the tab container */
ul.tabbies {
  display: flex;
  flex-wrap: wrap; /* Allow tabs to wrap to the next line */
  justify-content: flex-start; /* Align tabs to the start */
  max-width: 900px; /* Optional: constrain width */
  margin: 20px auto; /* Center the tab container */
  border-bottom: solid 1px #e1e1e1; /* Base bottom border for the tab bar */
  padding-bottom: 0; /* Ensure no extra padding below the border */
}

/* Styles for individual tab items */
ul.tabbies li {
  padding: 10px 20px; /* Padding inside each tab */
  text-align: center;
  cursor: pointer;
  margin-bottom: -1px; /* Pulls the li's bottom border up to cover ul's border */
  white-space: nowrap; /* Prevent text wrapping inside tabs */
  box-sizing: border-box; /* Include padding and border in element's total width/height */
}

/* Styles for tab links */
ul.tabbies li a {
  text-decoration: none;
  color: #000;
  font-size: 15px;
  display: block; /* Make the whole padding area clickable */
}

/* Hover state for tabs */
ul.tabbies li:hover {
  border-bottom: solid 1px #000; /* Darker border on hover */
}

ul.tabbies li:hover a {
  color: #000; /* Text color on hover */
}

/* Active state for tabs */
ul.tabbies li.active {
  border-bottom: solid 1px #c70000; /* Red border for active tab */
}

ul.tabbies li.active a {
  color: #c70000; /* Ensure active link text is red */
}