0

Necesito alinear un texto a la derecha en la plantilla AdminLTE, adjunto una imagen de lo que quiero hacer y despues el código.

introducir la descripción de la imagen aquí

Lo que quiero es alinear esa fecha a la derecha, que el select y el botón se mantengan a la izquierda y la fecha a la derecha, los tres deben estar en la misma línea.

En el código los tres se encuentran dentro de un contenedor y cada uno en un bloque de contenido.

.contenedor {
  margin: 1rem;
  text-align: left;
}

.contenido {
  display: inline-block;
  vertical-align: top;
}
<div class="row">
  <div class="form-group">
    <div class="contenedor">
      <form method="POST" action="{% url 'cont_elect:Reporte2' %}">
        {% csrf_token %}
        <div class="contenido">
          {{ form.fecha }}
        </div>
        <div class="contenido">
          <input type="submit" value="Filtrar" class="btn btn-primary btn-flat">
        </div>
        <div class="contenido">
          <h5>{{ i.fecha | date:"F, Y" }}</h5>
        </div>
      </form>
    </div>
  </div>
</div>

Agradeceria mucho la ayuda, ya que he intentado varias formas y no lo logro!

4
  • Mete los dos primeros en otro div, de manera que te queden dos bloques y al padre (actual clase contenedor le pones display: flex;justify-content: space-between; ya te quedarán "empujados a los lados"
    – Benito-B
    Commented el 29 may. 2023 a las 10:25
  • Bueno acabo de hacer lo que me dices y la verdad que no lo hace como necesito. Pero agradezco mucho su ayuda Commented el 29 may. 2023 a las 15:58
  • Si quieres ayuda más detallada te recomiendo que nos proporciones un ejemplo mínimo verificable, preferiblemente usando los snippets del sitio. El código que has puesto requiere que tengamos montado todo un servidor para poder probar... Crea un snippet que podamos modificar directamente y será más sencillo ayudarte. Además... deberías describir exactamente qué es lo que buscas, pues lo indicado en mi comentario genera exactamente lo que quieres, dejando el filtro a la izquierda y la fecha a la derecha.
    – Benito-B
    Commented el 30 may. 2023 a las 6:56
  • Buenas, ya lo logré utilizando lo que me recomendaste, elproblema es que la clase row no me dejaba hacerlo, entonces la modifique. Muchas gracias Commented el 30 may. 2023 a las 9:43

1 respuesta 1

0

Tienes la opción de usar una clase adicional o id para el elemento que contiene la fecha y usar la propiedad float: right; que "empuja" este elemento a la derecha, justo como lo necesitas.

Adicionalmente, recomiendo no usar la etiqueta <h5> ya que tiene un margin que lo hace ver desalineado horizontalmente respecto a los demás elementos. Lo cambié por una etiqueta <span>, pero lo dejo a tu elección.

.contenedor {
  margin: 1rem;
  text-align: left;
}

.contenido {
  display: inline-block;
  vertical-align: top;
}

.fecha {
  float: right;
}
<div class="row">
  <div class="form-group">
    <div class="contenedor">
      <form method="POST" action="">
        <div class="contenido">
          <select>
            <option>Seleccione una fecha</option>
          </select>
        </div>
        <div class="contenido">
          <input type="submit" value="Filtrar" class="btn btn-primary btn-flat">
        </div>
        <div class="contenido fecha">
          <span>Mayo, 2023</span>
        </div>
      </form>
    </div>
  </div>
</div>

También tienes la opción de usar flexbox, tal como te comentó @Benito-B y que, de acuerdo a tu comentario, te funcionó.

1
  • OK amigo, acabo de probarlo y me funciono perfectamente, claro tuve que sobreescribir la clase row, muchas gracias tambien para usted Commented el 31 may. 2023 a las 20:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.