Używam tego kodu, aby wyrównać przycisk do prawej.

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

Ale <p>tagi marnują trochę miejsca, więc chcę zrobić to samo z <span>lub <div>.

Wybór techniki dopasowania zależy od okoliczności, ale podstawowa to float: right;:

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

Prawdopodobnie będziesz chciał wyczyścić zmiennoprzecinkowe, ale można to zrobić za overflow:hiddenpomocą kontenera nadrzędnego lub jawnego <div style="clear: both;"></div>na dole kontenera.

Na przykład: http://jsfiddle.net/ambiguous/8UvVg/

Elementy pływające są usuwane z normalnego przepływu dokumentów, aby mogły przepełnić granicę rodzica i zepsuć wysokość rodzica, clear:bothCSS dba o to (jak to robi overflow:hidden). Zapoznaj się z przykładem JSFiddle, który dodałem, aby zobaczyć, jak zachowują się ruchy pływające i kasowanie ( overflow:hiddenpierwszy z nich chcesz jednak usunąć ).

Inną możliwością jest zastosowanie bezwzględnego pozycjonowania zorientowanego w prawo:

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

Oto przykład: https://jsfiddle.net/a2Ld1xse/

To rozwiązanie ma swoje wady, ale są przypadki użycia, w których jest bardzo przydatne.

Jeśli przycisk jest jedynym elementna 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>

Jeśli są inne elements na 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>

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

Powodzenia...

To rozwiązanie zależy od Bootstrap 3, jak wskazał @ günther-jena

Spróbować <a class="btn text-right">Call to Action</a>. W ten sposób nie potrzebujesz dodatkowych znaczników ani reguł, aby usunąć elementy pływające.

nowoczesne podejście w 2019 roku za pomocą Flex-Box

z tagiem div

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

z przęsła znacznika

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

Inną możliwością jest użycie bezwzględnego pozycjonowania zorientowanego z prawej strony. Możesz to zrobić w ten sposób:

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

Nie zawsze jest to takie proste i czasami wyrównanie musi być zdefiniowane w kontenerze, a nie w samym elemencie Button!

W twoim przypadku rozwiązaniem byłoby

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

Zadbałem width=100%o to, aby upewnić się, że <div>zajmiesz pełną szerokość jego pojemnika.

Dodałem również, padding:0aby uniknąć przed i po spacji, jak w przypadku <p>elementu.

Mogę powiedzieć, że jeśli <div>jest zdefiniowane w stopce tabeli FSF / Primefaces, float:rightnie działają one poprawnie, ponieważ wysokość przycisku będzie wyższa niż wysokość stopki!

W tej sytuacji Primefaces jedynym dopuszczalnym rozwiązaniem jest użycie text-align:rightw kontenerze.

Dzięki temu rozwiązaniu, jeśli masz 6 przycisków do wyrównania po prawej stronie, musisz tylko określić to wyrównanie w kontenerze :-)

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

Aby utrzymać przycisk w przepływie strony:

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

(umieść ten styl w pliku .css, nie używaj tego kodu HTML w celu lepszej konserwacji)

To by to rozwiązało.

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

Powodzenia w kodzie!

W moim przypadku

<p align="right"/>

działało dobrze

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