將 css 應用於<ul>李</ul>

Question

我想格式化一個列表，使其水平，看起來像頁面上的選項卡樣式鏈接，而不是項目符號列表。 我創建了一個新的 class，並嘗試使用 css 對其進行格式化。 我是菜鳥，很快就達到了我的能力極限。 任何人都可以發現我的錯誤並指出我正確的方向嗎？

示例頁面https://heram.org.uk/pages/important-legal-notice

我最初修改了默認選項卡 class（大錯誤 - 我將撤消此操作）。 我得到了正確的格式，但鏈接不起作用。 此處使用默認示例

https://heram.org.uk/pages/riding-policy

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>

虎斑 css：

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

Answer 1

由於預處理器未知，我決定只使用純 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; }

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

Answer 2

感謝@kameron 為我指明了正確的方向。 我對 css 進行了修改，並設法讓它與以下內容一起工作......希望它不會違反 css 最佳實踐！ 在這里完成頁面https://heram.org.uk/pages/important-legal-notice

ul,
li {
  list-style-type: none;
  padding-inline-start: 0;
}

ul.tabbies {
  display: flex;
  flex-wrap: wrap;
  max-width: auto;
  margin: auto;
  justify-content(flex-start);
  align-items(stretch);
  align-self: flex-end;
}

li {
  padding-bottom: 1em;
  text-align: left;
  min-width: fit-content;
  padding-right: 2em;
  padding-top: 1em;
  align-self: flex-end;
}

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