为<ul>列表添加CSS实现标签式横向导航，链接失效问题求助

我想把<ul>列表改成横向的标签式链接（而非默认项目符号列表），于是创建了tabbies类并尝试用SCSS格式化，但遇到了瓶颈：

• 最初修改默认tabs类时，虽然能得到正确的标签样式，但链接无法正常跳转（已打算撤销对默认类的修改）
• 自定义的tabbies类没能实现预期的横向标签效果

现有代码 #

HTML代码 #

<ul class="tabbies">
<li><a class="active" 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>

自定义SCSS代码 #

ul.tabbies {
  @extend %block;
  @extend %unselectable;
  @include overflow-touch;
  @include flexbox();
  @include flex-grow(1);
  @include flex-shrink(0);
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom-color: $tabs-border-bottom-color;
  border-bottom-style: $tabs-border-bottom-style;
  border-bottom-width: $tabs-border-bottom-width;

  padding-left: 0;
  margin-left: 0;

  flex-direction: row;
  flex-wrap: wrap;

  a {
    height: calc(100% + 1px);
    align-items: flex-start;
  }
  
  
  a {
    @include align-items(center);
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    @include flexbox();
    @include justify-content(center);
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    padding-left: 0;
    vertical-align: top;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
  }

  li {
    @include flexbox();
    @include justify-content(center);
    display: block;
    margin-top: 0.25em;
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;

    &.active,
    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }

    a.active,
    a.is-active {
      border-bottom-color: $tabs-link-active-border-bottom-color;
      color: $tabs-link-active-color;

      * {
        color: $tabs-link-active-color;// Used to ensure headings get proper color set
      }
    }
  }
}

问题排查与修复方案 #

1. 链接跳转失效原因（针对默认tabs类修改） #

默认tabs类大概率绑定了页面内标签切换的JavaScript逻辑，该逻辑会阻止链接的默认跳转行为。撤销对默认类的修改是正确选择，避免和原有功能冲突。

2. 自定义tabbies类的样式修复 #

你的SCSS存在多处布局冲突和冗余代码，以下是针对性修复：

（1）清理<li>元素的冲突属性

给<li>设置了display: block、display: table-caption等多个冲突属性，导致Flex布局失效。简化为：

li {
  @include flexbox();
  @include justify-content(center);
  margin-top: 0.25em;
  margin-right: 1em; // 添加标签间距
  list-style: none; // 移除默认项目符号
}

（2）合并并优化<a>标签样式

重复定义了<a>的样式块，同时调整点击区域和内边距：

a {
  @include flexbox();
  @include align-items(center);
  @include justify-content(center);
  height: calc(100% + 1px);
  border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style $tabs-border-bottom-color;
  color: $tabs-link-color;
  margin-bottom: -#{$tabs-border-bottom-width};
  padding: $tabs-link-padding;
  display: inline-block; // 确保点击区域覆盖整个标签
  text-decoration: none; // 可选：移除默认下划线

  &:hover {
    border-bottom-color: $tabs-link-hover-border-bottom-color;
    color: $tabs-link-hover-color;
  }
}

（3）优化整体Flex布局

简化<ul>的Flex属性，添加标签间距：

ul.tabbies {
  @extend %block;
  @extend %unselectable;
  @include overflow-touch;
  @include flexbox();
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style $tabs-border-bottom-color;
  padding-left: 0;
  margin-left: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em; // 标签间统一间距
}

（4）修正激活状态样式优先级

确保激活状态的样式优先级正确，避免冲突：

li a.active,
li a.is-active {
  border-bottom-color: $tabs-link-active-border-bottom-color;
  color: $tabs-link-active-color;

  * {
    color: $tabs-link-active-color;
  }
}

3. 最终完整SCSS代码 #

ul.tabbies {
  @extend %block;
  @extend %unselectable;
  @include overflow-touch;
  @include flexbox();
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style $tabs-border-bottom-color;
  padding-left: 0;
  margin-left: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;

  a {
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    height: calc(100% + 1px);
    border-bottom: $tabs-border-bottom-width $tabs-border-bottom-style $tabs-border-bottom-color;
    color: $tabs-link-color;
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    display: inline-block;
    text-decoration: none;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }

    &.active,
    &.is-active {
      border-bottom-color: $tabs-link-active-border-bottom-color;
      color: $tabs-link-active-color;

      * {
        color: $tabs-link-active-color;
      }
    }
  }

  li {
    @include flexbox();
    @include justify-content(center);
    margin-top: 0.25em;
    list-style: none;
  }
}

内容的提问来源于stack exchange，提问作者mark clarke