Mam ten komponent:

<div class="wrapper">
    <div horizontal-group class="filter-container">
      <comp-form-item :label="Date">
        <comp-datesrange ref="dataRange"
        ></comp-datesrange>
      </comp-form-item>
      <comp-form-item label class="filter-actions">
        <div horizontal-group class="internal-filter-buttons">
          <button class="btn btn-success">
          </button>
          <button class="btn btn-warning">
          </button>
        </div>
      </comp-form-item>
    </div>
    <comp-data-grid
    ></comp-data-grid>
  </div>

Oczekuje się, że dwa przyciski są umieszczone całkowicie na stronie, ale z obrazu widać, że są one po prawej, ale nie gdzie chciałbym, żeby były

enter image description here

To jest CSS:

<style lang="scss">
.filter-container {
  display: grid;
  column-gap: 1rem;
  row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 350px 350px 1fr;
  grid-template-areas: "filterActions";
  margin-bottom: 30px;
}
.internal-filter-buttons {
  text-align: right;
}
</style>

Próbowałem umieścić pływak: prawo zamiast testu wyrównania, a także określić styl klas "Filtr", wkładając pływak: w prawo, ale nic się nie zmieniło.

1
Riccardo Pezzolati 20 lipiec 2020, 13:38

1 odpowiedź

Najlepsza odpowiedź

Możesz spróbować następujących CSS:

.wrapper > .filter-container {
  display:flex;
  background-color:green;
  justify-content:space-between;
}

Więcej informacji na temat pracy z elementami Flex Elements ma spojrzenie tutaj .

1
casenonsensitive 20 lipiec 2020, 11:41