このコードを使用して、ボタンを右揃えにします。

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

ただし、<p>タグを使用するとスペースが無駄になるため、<span>またはで同じことを行うことを検討します<div>。

使用する位置合わせ手法は状況によって異なりますが、基本的なものはfloat: right;次のとおりです。

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

しかし、おそらくフロートをクリアしたいでしょうが、それoverflow:hiddenは親コンテナで、またはコンテナ<div style="clear: both;"></div>の下部で明示的に行うことができます。

例：http : //jsfiddle.net/ambiguous/8UvVg/

フローティング要素は通常のドキュメントフローから削除されるため、親の境界をオーバーフローさせて親の高さを台無しにする可能性があるため、clear:bothCSSがそれを処理します（と同様overflow:hidden）。フローティングとクリアの動作を確認するために追加したJSFiddleの例を試してみてください（overflow:hiddenただし、最初のものをドロップする必要があります）。

もう1つの可能性は、右向きの絶対配置を使用することです。

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

次に例を示します。https：//jsfiddle.net/a2Ld1xse/

このソリューションには欠点もありますが、非常に役立つユースケースがあります。

ボタンが唯一の場合elementには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>

上に他 elementsにある場合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>

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

幸運を...

このソリューションは、@günther-jenaによって指摘されているように、Bootstrap 3に依存しています

お試しください<a class="btn text-right">Call to Action</a>。この方法では、フロートされた要素を消去するために追加のマークアップやルールは必要ありません。

フレックスボックスを使用した2019年の最新のアプローチ

divタグ

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

スパンタグ

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

別の可能性は、右向きの絶対配置を使用することです。あなたはこの方法でそれを行うことができます：

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

これは常に単純であるとは限らず、配置はButton要素自体ではなくコンテナで定義する必要がある場合があります。

あなたの場合、解決策は

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

私は彼のコンテナの全幅をwidth=100%確保するように注意して指定しました<div>。

またpadding:0、<p>要素のように前後のスペースを避けるために追加しました。

<div>FSF / Primefacesテーブルのフッターで定義されている場合float:right、ボタンの高さがフッターの高さよりも高くなるため、正しく動作しないと言えます。

このPrimefacesの状況では、許容できる唯一の解決策はtext-align:rightコンテナで使用することです。

このソリューションでは、6つのボタンを右に揃える場合、コンテナ内でこの整列のみを指定する必要があります:-)

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

ボタンをページフローに保持するには：

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

（そのスタイルを.cssファイルに入れ、このhtmlをインラインで使用しないでください。メンテナンスが容易になります）

これで解決します。

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

あなたのコードで頑張ってください！

私の場合、

<p align="right"/>

うまくいきました

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