J'utilise ce code pour aligner à droite un bouton.

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

Mais les <p>balises gaspillent de l'espace, donc chercher à faire de même avec <span>ou <div>.

La technique d'alignement que vous utilisez dépend de votre situation mais la base est float: right;:

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

Vous voudrez probablement effacer vos flottants, mais cela peut être fait avec overflow:hiddensur le conteneur parent ou un explicite <div style="clear: both;"></div>au bas du conteneur.

Par exemple: http://jsfiddle.net/ambiguous/8UvVg/

Les éléments flottants sont supprimés du flux de documents normal afin qu'ils puissent déborder la limite de leur parent et gâcher la hauteur du parent, le clear:bothCSS s'en charge (comme le fait overflow:hidden). Jouez avec l'exemple JSFiddle que j'ai ajouté pour voir comment se comportent le flottement et la compensation (vous voudrez cependant supprimer le overflow:hiddenpremier).

Une autre possibilité est d'utiliser un positionnement absolu orienté vers la droite:

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

Voici un exemple: https://jsfiddle.net/a2Ld1xse/

Cette solution a ses inconvénients, mais il existe des cas d'utilisation où elle est très utile.

Si le bouton est le seul elementsur 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>

S'il y en a d' autres elements sur 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>

Avec 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>

Bonne chance...

Cette solution dépend de Bootstrap 3, comme l'a souligné @ günther-jena

Essayez <a class="btn text-right">Call to Action</a>. De cette façon, vous n'avez pas besoin de balises ou de règles supplémentaires pour effacer les éléments flottants.

une approche moderne en 2019 avec flex-box

avec balise div

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

avec balise span

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

Une autre possibilité est d'utiliser un positionnement absolu orienté vers la droite. Vous pouvez le faire de cette façon:

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

Ce n'est pas toujours aussi simple et parfois l'alignement doit être défini dans le conteneur et non dans l'élément Button lui-même!

Pour votre cas, la solution serait

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

J'ai pris soin de préciser width=100%pour être sûr de <div>prendre toute la largeur de son container.

J'ai également ajouté padding:0pour éviter l'espace avant et après comme avec <p>élément.

Je peux dire que si <div>est défini dans le pied de page d'un tableau FSF / Primefaces, le float:rightne fonctionne pas correctement car la hauteur du bouton deviendra supérieure à la hauteur du pied de page!

Dans cette situation Primefaces, la seule solution acceptable est d'utiliser text-align:righten conteneur.

Avec cette solution, si vous avez 6 boutons à aligner à droite, vous ne devez spécifier cet alignement que dans le conteneur :-)

<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>

Pour conserver le bouton dans le flux de page:

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

(mettez ce style dans un fichier .css, n'utilisez pas ce html en ligne, pour une meilleure maintenance)

Cela le résoudrait.

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

Bonne chance avec votre code!

Dans mon cas, le

<p align="right"/>

a bien fonctionné

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