Colocar un botón alineado a la derecha

Resuelto Sourav asked hace 13 años • 11 respuestas

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

<p align="right">
  <input type="button" value="Click Me" />
</p>
Expandir fragmento

Pero <p>las etiquetas desperdician algo de espacio, por lo que intentamos hacer lo mismo con <span>o <div>.

Sourav avatar Jul 09 '11 09:07 Sourav
Aceptado

La técnica de alineación que utilice depende de sus circunstancias, pero la básica es float: right;:

<input type="button" value="Click Me" style="float: right;">

Probablemente querrás borrar tus flotadores, pero eso se puede hacer overflow:hiddenen el contenedor principal o de forma explícita <div style="clear: both;"></div>en la parte inferior del contenedor.

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

Los elementos flotantes se eliminan del flujo normal del documento para que puedan desbordar el límite de su padre y alterar su altura, el clear:bothCSS se encarga de eso (al igual que overflow:hidden). Juega con el ejemplo de JSFiddle que agregué para ver cómo se comportan la flotación y la limpieza (aunque querrás eliminar el overflow:hiddenprimero).

mu is too short avatar Jul 09 '2011 02:07 mu is too short

Si el botón es el único elementen block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}
<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>
Expandir fragmento

Si hay otros elements en block:

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

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

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}
<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>
Expandir fragmento

Con flex-box:

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

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}
<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>
Expandir fragmento

Buena suerte...

Aakash avatar Nov 24 '2017 06:11 Aakash