Uso questo codice per allineare a destra un pulsante.

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

Ma i <p>tag sprecano spazio, quindi cerca di fare lo stesso con <span>o <div>.

Quale tecnica di allineamento usi dipende dalle tue circostanze, ma quella di base è float: right;:

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

Probabilmente vorrai cancellare i tuoi float, ma ciò può essere fatto con overflow:hiddenil contenitore principale o un esplicito <div style="clear: both;"></div>nella parte inferiore del contenitore.

Ad esempio: http://jsfiddle.net/ambiguous/8UvVg/

Gli elementi fluttuanti vengono rimossi dal normale flusso di documenti in modo da poter traboccare dai confini dei genitori e incasinare l'altezza dei genitori, il clear:bothCSS si occupa di questo (così come overflow:hidden). Gioca con l'esempio di JSFiddle che ho aggiunto per vedere come si comportano il floating e il clearing (ti consigliamo di abbandonare il overflow:hiddenprimo però).

Un'altra possibilità è quella di utilizzare un posizionamento assoluto orientato a destra:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

Ecco un esempio: https://jsfiddle.net/a2Ld1xse/

Questa soluzione ha i suoi lati negativi, ma ci sono casi d'uso in cui è molto utile.

Se il pulsante è l'unico elementsu 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>

Se ce ne sono altri elements su 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>

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>

In bocca al lupo...

Questa soluzione dipende da Bootstrap 3, come sottolineato da @ günther-jena

Prova <a class="btn text-right">Call to Action</a>. In questo modo non hai bisogno di markup o regole extra per cancellare gli elementi mobili.

un approccio moderno nel 2019 utilizzando flex-box

con tag div

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

con tag span

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Un'altra possibilità è quella di utilizzare un posizionamento assoluto orientato a destra. Puoi farlo in questo modo:

style="position: absolute; right: 0;"

Non è sempre così semplice e talvolta l'allineamento deve essere definito nel contenitore e non nell'elemento Button stesso!

Nel tuo caso, la soluzione sarebbe

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

Mi sono preso cura di specificare width=100%di essere sicuro che occupasse <div>tutta la larghezza del suo contenitore.

Ho anche aggiunto padding:0per evitare lo spazio prima e dopo come con l' <p>elemento.

Posso dire che se <div>è definito nel piè di pagina di una tabella FSF / Primefaces, float:rightnon funziona correttamente perché l'altezza del pulsante diventerà più alta dell'altezza del piè di pagina!

In questa situazione di Primefaces, l'unica soluzione accettabile è l'uso text-align:rightin container.

Con questa soluzione, se hai 6 pulsanti da allineare a destra, devi solo specificare questo allineamento nel contenitore :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Per mantenere il pulsante nel flusso della pagina:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(metti quello stile in un file .css, non usare questo html in linea, per una migliore manutenzione)

Questo lo risolverebbe.

<input type="button" value="Text Here..." style="float: right;">

Buona fortuna con il tuo codice!

Nel mio caso il

<p align="right"/>

ha funzionato bene

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>