Saya menggunakan kode ini untuk menyelaraskan tombol.

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

Tetapi <p>tag menghabiskan banyak ruang, jadi mencari untuk melakukan hal yang sama dengan <span>atau <div>.

Teknik penyelarasan mana yang Anda gunakan tergantung pada keadaan Anda tetapi yang mendasar adalah float: right;:

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

Anda mungkin ingin menghapus float Anda tetapi itu bisa dilakukan dengan overflow:hiddenpada wadah induk atau eksplisit <div style="clear: both;"></div>di bagian bawah wadah.

Misalnya: http://jsfiddle.net/ambiguous/8UvVg/

Elemen apung dihapus dari aliran dokumen normal sehingga mereka dapat meluap batas orangtua mereka dan mengacaukan ketinggian induk, clear:bothCSS menangani hal itu (seperti halnya overflow:hidden). Bermain-main dengan contoh JSFiddle yang saya tambahkan untuk melihat bagaimana perilaku mengambang dan kliring (Anda akan ingin menjatuhkan yang overflow:hiddenpertama).

Kemungkinan lain adalah menggunakan penentuan posisi absolut yang berorientasi ke kanan:

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

Berikut ini contohnya: https://jsfiddle.net/a2Ld1xse/

Solusi ini memiliki kelemahan, tetapi ada kasus penggunaan yang sangat berguna.

Jika tombolnya adalah satu-satunya elementpada 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>

Jika ada yang lain elements di 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>

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

Semoga berhasil...

Solusi ini tergantung pada Bootstrap 3, seperti yang ditunjukkan oleh @ günther-jena

Coba <a class="btn text-right">Call to Action</a>. Dengan cara ini Anda tidak perlu markup atau aturan tambahan untuk menghapus elemen yang melayang.

pendekatan modern pada 2019 menggunakan flex-box

dengan tag div

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

dengan tag rentang

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

Kemungkinan lain adalah menggunakan penentuan posisi absolut yang berorientasi ke kanan. Anda bisa melakukannya dengan cara ini:

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

Ini tidak selalu begitu sederhana dan kadang-kadang pelurusan harus didefinisikan dalam wadah dan bukan pada elemen Tombol itu sendiri!

Untuk kasus Anda, solusinya adalah

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

Saya telah berhati-hati untuk menentukan width=100%untuk memastikan bahwa <div>mengambil lebar penuh wadahnya.

Saya juga menambahkan padding:0untuk menghindari ruang sebelum dan sesudah dengan <p>elemen.

Saya dapat mengatakan bahwa jika <div>didefinisikan dalam footer tabel FSF / Primefaces, float:rightitu tidak berfungsi dengan benar karena tinggi Button akan menjadi lebih tinggi dari tinggi footer!

Dalam situasi Primefaces ini, satu-satunya solusi yang dapat diterima adalah menggunakan text-align:rightdalam wadah.

Dengan solusi ini, jika Anda memiliki 6 Tombol untuk diluruskan di kanan, Anda hanya harus menentukan perataan ini dalam wadah :-)

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

Untuk menjaga tombol dalam aliran halaman:

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

(letakkan gaya itu dalam file .css, jangan gunakan html inline ini, untuk pemeliharaan yang lebih baik)

Ini akan menyelesaikannya.

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

Semoga berhasil dengan kode Anda!

Dalam kasus saya

<p align="right"/>

bekerja dengan baik

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