如何解决3个重叠的按钮？

Question

我有3个下拉按钮，在移动视图上而不是水平显示，它们相互重叠。我认为.filter-check:checked+label类属性需要进行审查。我可以对代码进行哪些更改，以便水平显示按钮？

这是我的scss代码

@media (min-width: 700px) {
  .filter-button {
    display: none;
  }

  .filter-check {
    display: none;
  }
}

@media (max-width: 700px) {
  .filter {
    display: none;
  }

  .filter-check {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  .filter-button {
    background: white;
    border: 1px solid black;
    border-radius: 2px;
    color: dark-gray;
    float: right;
    font-family: font-family-nimbus-sans-bold;
    font-size: 18px;
    height: 48px;
    text-align: left;
    width: 100%;
  }
}

// sass-lint:disable force-pseudo-nesting

.filter-check:checked+label {     ---------------> I think this class properties needs to be checked
  +.filters {
    .filter {
      background-color: white;
      display: block;
      height: 100%;
      left: 0;
      overflow-y: auto;
      padding-bottom: 65px;
      position: fixed;
      top: 0;
      width: 100%;
    }

    ::ng-deep {
      .overlay-drop {
        height: auto;
        position: relative;
      }

      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }
  }
}


.filters {
  display: flex;
  flex-wrap: wrap;


  @media screen and (min-width: 700px) {
    .filter {
      background-color: white;
      border: 1px solid black;
      border-radius: 2px;
      flex-basis: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      height: 72px;
      margin-right: 10px;
      max-width: 224px;

      &.disabled {
        border-color: silver-chalice;
        color: silver-chalice;
        opacity: .4;
        pointer-events: none;

        &:hover {
          cursor: no-drop;
        }
      }
    }
  }
}

这是我的html代码

<ng-container>
    <label class="filter-button" for="button" (click)="xy()">Coders</label>
    <div class="filters">
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="a">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="b">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="c">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="shareClassData"></overlay-drop>
      </div>
    </div>

  </ng-container>
 /ng-container>

Answer 1

为scss尝试使用此代码

@media (min-width: 700px) {
  .filter-button {
    display: none;
  }

  .filter-check {
    display: none;
  }
}

@media (max-width: 700px) {

  .filter-check {
    display: none;
  }
}

  .filter-button {
    background: white;
    border: 1px solid black;
    border-radius: 2px;
    color: dark-gray;
    float: none;
    font-family: font-family-nimbus-sans-bold;
    font-size: 18px;
    height: 48px;
    text-align: left;
    width: 100%;
  }


// sass-lint:disable force-pseudo-nesting

.filter-check:checked+label { 
  +.filters {
    .filter {
      background-color: white;
      display: block;
      height: 100%;
      left: 0;
      overflow-y: auto;
      padding-bottom: 65px;
      position: fixed;
      top: 0;
      width: 100%;
    }

    ::ng-deep {
      .overlay-drop {
        height: auto;
        position: relative;
      }

      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }
  }
}


.filters {
  display: flex;

    .filter {
      background-color: white;
      border: 1px solid black;
      border-radius: 2px;
      flex-basis: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      height: 72px;
      margin-right: 10px;
      max-width: 224px;

      &.disabled {
        border-color: silver-chalice;
        color: silver-chalice;
        opacity: .4;
        pointer-events: none;

        &:hover {
          cursor: no-drop;
        }
      }
    }
}

<ng-container>
    <label class="filter-button" for="button" (click)="xy()">Coders</label>
    <div class="filters">
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="a">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="b">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="c">
        </overlay-drop>
      </div>
      <div class="filter">
        <overlay-drop [dropdownLabel]="i18nService"
          [modelDropdown]="shareClassData"></overlay-drop>
      </div>
    </div>

  </ng-container>