Richten Sie eine Schaltfläche in HTML rechtsbündig aus

Um eine Schaltfläche am rechten Rand ihres umgebenden Bereichs zu platzieren, setzen Sie sie in einen Container und geben diesem die CSS-Eigenschaft text-align mit dem Wert right. Die Ausrichtung richtet sich nach der verfügbaren Breite des Containers. Dieser muss daher den gesamten Bereich umfassen, in dem die Schaltfläche positioniert werden soll. Als Alternative zeigt dieser Artikel float: right und erklärt, wann dessen abweichendes Layoutverhalten relevant ist.

Eigenschaften zum rechtsbündigen Ausrichten einer Schaltfläche

Mit text-align lassen sich Inline-Inhalte innerhalb eines Containers ausrichten; mit float kann ein Element umflossen werden. Eine umfassendere Erläuterung zur Positionierung von Seitenelementen finden Sie unter verschiedene CSS-Eigenschaften zur Ausrichtung.

Eine Schaltfläche in HTML mit der Eigenschaft text-align rechtsbündig ausrichten

Platzieren Sie die Schaltfläche in einem <div> und wenden Sie text-align: right auf dieses <div> an. Das vollständige Markup sieht beispielsweise so aus: <div class="button-row" style="text-align: right;"><button type="button">Save</button></div>. Die Schaltfläche bleibt im normalen Inline-Inhaltsfluss; der Container richtet sie an seiner rechten Seite aus. In einem Stylesheet lässt sich dieselbe Regel als .button-row { text-align: right; } formulieren und über class="button-row" dem <div> zuweisen.

Dieses eigenständige JavaScript gibt den Quelltext einer vollständigen HTML-Seite aus, die die Container-Methode verwendet. Speichern Sie das ausgegebene Markup als HTML-Datei und öffnen Sie diese in einem Browser, um die rechts im Container ausgerichtete Schaltfläche zu sehen. Der unveränderte Beispielcode zeigt die Beschriftung „Save“ auf Englisch.

const page = `<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>`;

console.log(page);

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>

Damit wird die Schaltfläche innerhalb des Containers ausgerichtet, nicht automatisch am Rand des Browserfensters. Geben Sie dem Container die Breite des gewünschten Bereichs; ein Container mit voller Blockbreite richtet die Schaltfläche am rechten Rand dieses Blocks aus. Die HTML- und CSS-Ausschnitte sind Quelltextbeispiele. Für die visuelle Darstellung müssen sie in einem Browser gerendert werden.

Eine Schaltfläche in HTML mit der Eigenschaft float rechtsbündig ausrichten

Um die Schaltfläche selbst schweben zu lassen, verwenden Sie <button type="button" style="float: right;">Save</button>. Alternativ können Sie die Regel .action-button { float: right; } in ein Stylesheet aufnehmen und der Schaltfläche die Klasse class="action-button" zuweisen. Ein Float verschiebt die Schaltfläche zur rechten Seite ihres umgebenden Blocks und beeinflusst, wie Inline-Inhalte um sie herumfließen. Wenn der nachfolgende Inhalt unterhalb der schwebenden Schaltfläche beginnen soll, heben Sie den Float auf oder verwenden Sie stattdessen ein Layoutverfahren wie Flexbox.

Wie bei der Container-Methode richtet sich auch der Float nach der Breite des umgebenden Blocks. Er platziert die Schaltfläche nicht von selbst am rechten Rand des Browserfensters. Diese Beispiele beschreiben das CSS-Verhalten im Browser und lassen sich in der konfigurierten Laufzeit nicht ausführen. Der unveränderte Beispielcode enthält die englische Beschriftung „Save“.

Die beste CSS-Eigenschaft zum Ausrichten einer Schaltfläche

Für eine einzelne Schaltfläche, die rechts in einer Zeile oder einem Abschnitt stehen soll, empfiehlt sich text-align: right für den Container. Die Schaltfläche bleibt dadurch im normalen Inhaltsfluss, und die Zuständigkeit für die Ausrichtung ist klar: Der Container bestimmt, wo seine Inline-Inhalte stehen. Verwenden Sie float: right, wenn die Schaltfläche am Textumfluss teilnehmen soll oder das Layout ausdrücklich einen Float vorsieht. Berücksichtigen Sie dabei Inhalte, die neben ihr fließen, und heben Sie den Float auf, wenn spätere Inhalte darunter beginnen sollen.

Keine der beiden Methoden legt den passenden Seitenbereich für Sie fest. Prüfen Sie Breite und Position des Containers, wenn die Schaltfläche zu weit links oder rechts erscheint. Bei mehreren Bedienelementen oder komplexeren Abständen ist ein Flex-Container mit justify-content: flex-end eine weitere Möglichkeit; die beiden beschriebenen Methoden lösen jedoch die direkte Ausrichtungsaufgabe.

Fazit

Für eine unkompliziert rechtsbündige Schaltfläche verwenden Sie text-align: right für einen ausreichend breiten Container. Setzen Sie float: right direkt an der Schaltfläche ein, wenn Sie dessen besonderes Verhalten beim Textumfluss benötigen, und berücksichtigen Sie den umgebenden Inhalt. In beiden Fällen bestimmt der umgebende Block, wo sich der sichtbare rechte Rand befindet.