Tengo este componente:

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

El resultado esperado es que los dos botones están posicionados completamente a la derecha en la página, pero en la imagen puedes ver que están a la derecha pero no donde me gustaría que estuvieran.

enter image description here

Este es el 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>

Intenté poner float: right en lugar de test-align y también especificar el estilo para la clase "filter-actions" insertando float: right pero nada ha cambiado.

1
Riccardo Pezzolati 20 jul. 2020 a las 13:38

1 respuesta

La mejor respuesta

Puede probar el siguiente CSS:

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

Para obtener más información sobre cómo trabajar con elementos flexibles, consulte aquí < / a>

1
casenonsensitive 20 jul. 2020 a las 11:41