Apply css to
li

Question

I'd like to format a list so that it's horizontal and looks like tab style links on the page instead of a bullet list. I've created a new class called and tried to format it with css. I'm a noob and have quickly reached my competence limit. Can anyone spot my mistake and point me in the right direction please?

Example page https://heram.org.uk/pages/important-legal-notice

I initially modified the default tabs class (big mistake - I'll undo this). I get the correct formatting but the links don't work. Example here using the default

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

HTML:


Important Legal Notice
Riding Policy
Website Terms of Use
Privacy Policy
Non-Discrimination Policy
Refund Policy
Cookie Policy
Disclaimer
GDPR
CCA Opt-out

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

user_16496357 · Answer

With the preprocessor being unknown, I decided just to do the layout with pure 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;
}


  Important Legal Notice
  Riding Policy
  Website Terms of Use
  Privacy Policy
  Non-Discrimination Policy
  Refund Policy
  Cookie Policy
  Disclaimer
  GDPR
  CCA Opt-out

user_10711409 · Answer

Thank you to @kameron for pointing me in the right direction. I tinkered around with the css and managed to get it to work with the following ... hope it doesn't offend any css experts! Finished page here 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;
  color: #000;
}

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

li:hover {
  color: #c70000;
  border-bottom: solid #000 1px !important;
}

.tabbies .active {
  color: #c70000;
}

.tabbies li {
  list-style: none;
}

.tabbies li a {
  text-decoration: none;
  color: #000;
}

Apply css to <ul> li

2 Answers