52 votos

Colocar un botón alineado a la derecha

Utilizo este código para alinear a la derecha un botón.

Pero las etiquetas

ocupan mucho espacio, así que busco hacer lo mismo con o

.

114voto

mu is too short Puntos 205090

Qué técnica de alineación utilices depende de tus circunstancias, pero la básica es float: right;:

Probablemente querrás limpiar tus flotantes, lo cual se puede hacer con overflow: hidden en el contenedor padre o un

explícito en la parte inferior del contenedor.

Por ejemplo: http://jsfiddle.net/ambiguous/8UvVg/

Los elementos flotantes son eliminados del flujo normal del documento por lo que pueden sobrepasar el límite de su contenedor y afectar la altura del padre, el CSS clear: both se encarga de eso (al igual que overflow: hidden). Juega con el ejemplo de JSFiddle que agregué para ver cómo se comportan el flotante y el despeje (aunque primero deberás quitar el overflow: hidden).

59voto

Akash Puntos 5397

Si el botón es el único elemento en el bloque:

.border {
  border: 2px azul punteado;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

Si hay otros elementos en el bloque:

.border {
  border: 2px índigo punteado;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

  El párrafo.....lorem ipsum...etc.

    El Botón

Con flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px punteado azul;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px rosado oscuro punteado;
}

Botón con Texto

Érase una vez en un ...
Leer Más...

Solo Botón

  El Botón

Varios Botones

  Botón 1
  Botón 2

¡Buena suerte...

44voto

Günther Jehle Puntos 167

Otra posibilidad es usar un posicionamiento absoluto orientado a la derecha:

Aquí tienes un ejemplo: https://jsfiddle.net/a2Ld1xse/

Esta solución tiene sus inconvenientes, pero hay casos de uso donde es muy útil.

17voto

Un enfoque moderno en 2019 utilizando flex-box

con la etiqueta div

con la etiqueta span

12voto

ranieribt Puntos 157

Esta solución depende de Bootstrap 3, como señaló @günther-jena

Prueba Llamado a la Acción. De esta manera no necesitas marcas adicionales ni reglas para eliminar elementos flotados.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X