Ich benutze diesen Code, um eine Schaltfläche rechts auszurichten.

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

Aber <p>Tags vergeudet etwas Platz, so sucht das gleiche zu tun mit <span>oder <div>.

Welche Ausrichtungstechnik Sie verwenden, hängt von Ihren Umständen ab. Die grundlegende ist jedoch float: right;:

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

Sie werden wahrscheinlich Ihre Floats löschen wollen, aber das kann mit overflow:hiddendem übergeordneten Container oder einem expliziten <div style="clear: both;"></div>am unteren Rand des Containers erfolgen.

Zum Beispiel: http://jsfiddle.net/ambiguous/8UvVg/

Floated-Elemente werden aus dem normalen Dokumentenfluss entfernt, damit sie die Grenzen ihrer Eltern überschreiten und die Höhe der Eltern durcheinander bringen können. Das clear:bothCSS kümmert sich darum (wie auch overflow:hidden). Spielen Sie mit dem von mir hinzugefügten JSFiddle-Beispiel, um zu sehen, wie sich Floating und Clearing verhalten (Sie sollten jedoch das overflow:hiddenerste löschen).

Eine andere Möglichkeit besteht darin, eine nach rechts gerichtete absolute Positionierung zu verwenden:

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

Hier ein Beispiel: https://jsfiddle.net/a2Ld1xse/

Diese Lösung hat ihre Nachteile, aber es gibt Anwendungsfälle, in denen sie sehr nützlich ist.

Wenn die Schaltfläche die einzige elementauf der 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>

Wenn es andere elements auf dem gibt 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>

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

Viel Glück...

Diese Lösung hängt von Bootstrap 3 ab, wie von @ günther-jena hervorgehoben

Versuchen Sie es <a class="btn text-right">Call to Action</a>. Auf diese Weise benötigen Sie keine zusätzlichen Markups oder Regeln, um schwebende Elemente zu löschen.

Ein moderner Ansatz im Jahr 2019 mit Flex-Box

mit div tag

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

mit span tag

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

Eine andere Möglichkeit besteht darin, eine nach rechts gerichtete absolute Positionierung zu verwenden. Sie können es so machen:

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

Es ist nicht immer so einfach und manchmal muss die Ausrichtung im Container und nicht im Button-Element selbst definiert werden!

Für Ihren Fall wäre die Lösung

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

Ich habe darauf geachtet, dies zu spezifizieren width=100%, um sicherzugehen<div> die volle Breite seines Containers einnimmt.

Ich habe auch hinzugefügt padding:0, um vor und nach dem Leerzeichen wie mit zu vermeiden<p> Element .

Ich kann sagen, wenn dies <div>in der Fußzeile einer FSF / Primefaces-Tabelle definiert ist, float:rightfunktioniert dies nicht richtig, da die Schaltflächenhöhe höher als die Fußzeilenhöhe wird!

In dieser Primefaces-Situation ist die Verwendung text-align:rightin Containern die einzig akzeptable Lösung .

Wenn Sie bei dieser Lösung 6 Schaltflächen rechts ausrichten müssen, müssen Sie diese Ausrichtung nur im Container angeben :-)

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

So halten Sie die Schaltfläche im Seitenfluss:

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

(Fügen Sie diesen Stil in eine CSS-Datei ein. Verwenden Sie diesen HTML-Code nicht inline, um eine bessere Wartung zu gewährleisten.)

Dies würde es lösen.

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

Viel Glück mit Ihrem Code!

In meinem Fall die

<p align="right"/>

hat gut funktioniert

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