scss 带边框的中心对齐菜单

Posted 2021-05-18

// "About Us" menu.
.menu-about-us {
  @include clearfix;
  text-align: center;

  // Block title.
  h2.block__title {
    @include font-size(18);
    margin-bottom: rem(10px);
  }

  // Content.
  .block-content {
    @include clearfix;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  // Menu.
  ul.menu {
    @include font-size(16, 16);
    clear: left;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;

    li {
      border-right: 1px solid $white;
      display: block;
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
      right: 50%;

      // First.
      &.first {

        // Links.
        a,
        a:visited {
          padding-left: 0;
        }
      }

      // Last.
      &.last {
        border-right: none;

        // Links.
        a,
        a:visited {
          padding-right: 0;
        }
      }
    }

    // Links.
    a,
    a:visited {
      display: block;
      padding: 0 rem(10px);

      // Hover, focus, and active.
      &:hover,
      &:focus,
      &.active {
        text-decoration: underline;
      }
    }
  }
}