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
.
Respuestas
¿Demasiados anuncios?
El técnica de alineación que uses depende de tus circunstancias, pero la básica es float: right;:
Probablemente querrás limpiar tus floats, 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 flotados son removidos del flujo normal del documento, por lo que pueden sobrepasar los límites del contenedor padre y afectar la altura del mismo, el CSS clear:both se encarga de eso (así como overflow:hidden). Juega con el ejemplo de JSFiddle que agregué para ver cómo se comportan el flotado y el clearing (aunque primero tendrás que quitar el overflow:hidden).
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ónCon 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 rosa profundo 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...
Günther Jehle
Puntos
167
Otra posibilidad es utilizar 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.
Dream Hunter - hashADH
Puntos
3206
ranieribt
Puntos
157
- Ver respuestas anteriores
- Ver más respuestas
