Bewegen Sie die CSS -Taste nach rechts

Eine gut gestaltete Website kann Sie unterstützen, um einen starken ersten Einfluss auf die Zielbenutzer zu entwickeln. Es gibt den Website -Zuschauern einen positiven Eindruck der Verbraucher und macht es ihnen reibungsloser, zu durchsuchen und darauf zugreifen. Abgesehen von den anderen wichtigen Elementen benötigt jede Website Schaltflächen, um ordnungsgemäß zu funktionieren. Durch Schaltflächen können die Verbraucher mit einer Plattform in Kontakt treten und eine Aktion ausführen, indem sie die Optionen auswählen. Durch die Anwendung der zahlreichen stilistischen Attribute auf die Schaltfläche werden die CSS -Schaltflächen bereitgestellt, um die Websites zu schmücken. Sie können Farben hinzufügen, Größen ändern, eine Schaltfläche ausrichten usw.

Die Ausrichtung bezieht sich auf die Positionierung von etwas auf eine bestimmte Weise, die entweder Text oder Schaltflächen sein kann. Die Knopfausrichtung bezieht sich darauf, wie Sie Ihre Schaltflächen positionieren möchten, ich.e. links, rechts oder in der Mitte der Webseite.

In diesem Artikel wird die Verwendung von CSS zum Ausrichten einer Schaltfläche nach rechts erörtert. Für die Text- oder Schaltflächenpositionierung stehen verschiedene CSS -Eigenschaften zur Verfügung. Wir können dies tun, indem wir die Float-Eigenschaft, die text-aligneigenschaftliche Eigenschaft und die Anwaltschaftseigenschaft verwenden.

Float -Eigenschaft, um die Taste nach rechts auszurichten

Die CSS Float -Eigenschaft bestimmt, wie die Daten auf einer Webseite strukturiert und positioniert werden.

Wir müssen zuerst eine Schaltfläche in der HTML -Datei erstellen. Wir nutzen den erhabenen Texteditor, um diese Illustration in die Praxis umzusetzen. Der HTML -Code zum Erstellen einer einfachen Schaltfläche wird im folgenden Bild angezeigt:

In diesem Code haben wir in der HTML -Datei eine Schaltfläche erstellt. Wir haben das Tag verwendet, das als Behälter verwendet wird, um die HTML -Elemente darin zu wickeln. Die Attribute „Div class“ werden verwendet, um die HTML -Datei mit CSS zu stylen. Wir haben einen Text hinzugefügt, der auf der Schaltfläche angezeigt wird.

Sie können die Schaltfläche, die wir gerade erstellt und auf der linken Seite der Seite angezeigt haben, standardmäßig sehen.

Als nächstes müssen wir diese Schaltfläche in der rechten Ecke der Seite positionieren. Das CSS -Skript wird verwendet, um dies zu erreichen. Die Taste wird mit dem CSS -Float -Attribut nach rechts platziert. Der ".button_btn ”bezieht sich auf die Div -Klasse, die wir im HTML -Code erstellt haben, um eine Schaltfläche zu erstellen. Jetzt können wir auf das Design zugreifen und auf die in diesem Container erstellte Taste anwenden. Wir verwenden die Eigenschaft "Float" darin und setzen seinen Wert auf "Recht". Es bietet uns einige Werte - keine, rechts, links, anfänglich und erben. Da wir beabsichtigen, die Taste rechts zu positionieren, verwenden wir daher den „richtigen“ Wert für die Float -Eigenschaft in CSS.

Das vorherige Skript liefert bei der Ausführung die Ausgabe, die im folgenden Bild angezeigt wird. Die Taste befindet sich rechts auf dem Bildschirm, wenn der Wert der Float -Eigenschaft auf „rechts“ eingestellt ist.

Textausrichtung Eigenschaft, um die Schaltfläche nach rechts auszurichten

Die nächste Eigenschaft, mit der wir eine Schaltfläche nach rechts ausrichten, ist die Eigenschaft „Text-Align“ in CSS. Wir haben eine HTML -Datei erstellt. In dem Tag des HTML haben wir eine Überschrift erstellt, die oben auf der Webseite mit dem angezeigt wird

Schild. Dann haben wir in der Klasse eine Schaltfläche erstellt. Definieren Sie einen Text, der auf der Schaltfläche angezeigt wird.

Dadurch werden wir die im Bild angegebene Ausgabe -Webseite erhalten. Der von uns hinzugefügte Text wird in der oberen rechten Ecke der Seite angezeigt, während direkt unten die Schaltfläche, die wir erstellt haben.

Um diese Schaltfläche zu verschieben, die wir im vorherigen Code auf der rechten Seite der Seite erstellt haben, üben wir die Eigenschaft „Text-Align“ aus. Wir verwenden das "Text-Align" im CSS-Skript. Der CSS -Code ist unten angegeben:

Die text-aligneigenschaft wird verwendet, um das Element in den verschiedenen Richtungen zu positionieren. Diese Eigenschaft bietet uns bestimmte Werte, um die Elemente wie links, rechts, mitte, anfänglich, erben und rechtfertigen zu positionieren. Da wir möchten, dass die Schaltfläche in der rechten Ecke der Webseite positioniert wird, verwenden wir den "richtigen" Wert für die Eigenschaft "Text-Align" in CSS.

Jetzt arbeiten wir mit dem CSS -Skript, um die Schaltfläche zu stylen, die wir in der HTML -Datei erstellt haben. Der ".”Bezieht sich auf die Div -Klasse, die wir in HTML erstellt haben, gefolgt vom Klassennamen. Dies ist unser Beispiel für einen „Knopf“. Dies ermöglicht es uns, das Element in der genannten Klasse zu stylen. Die Eigenschaft „Text-Align“ wird auf den Wert "Rechte" gesetzt, damit die Schaltfläche auf die rechte Ecke der Webseite ausgerichtet ist.

Sie können sehen, wie die einfache Anwendung der Eigenschaft „Text-Align“ Ihnen bei der Ausrichtung der Schaltfläche zu Ihrer gewünschten Position hilft. Für unsere Bedürfnisse haben wir es rechts angepasst und das Ausgabebild zeigt eine Taste mit dem auf der rechten Seite ausgerichteten Text „Cursor drücken“.

Justify-In-Incontent-Eigenschaft, um die Taste nach rechts auszurichten

Die letzte Eigenschaft, die wir ausführen werden, um die Schaltfläche an die rechte Ecke auszurichten, ist die Eigenschaft „Justify-Incontent“. In den vorherigen Fällen haben wir als erstes eine HTML -Datei erstellt. Sie können es in jedem Texteditor oder Visual Studio tun. Wir implementieren es im Sublime Texteditor.

In der HTML -Datei im Tag im Tag haben wir zuerst eine Überschrift mit dem erstellt

Schild. Dann haben wir mit der Dummy -Daten erstellt

Schild. Der

Tag wird verwendet, wenn wir die Absätze in HTML schreiben. Wir haben dann die begonnen . In einem HTML -Dokument bezeichnet das Div -Tag eine Partition oder ein Segment. Die HTML -Elemente werden in das „DIV“ -Tag platziert und dann wird das CSS -Styling angewendet. Wir haben den Div -Klasse -Namen "Dummy_BTN" angegeben. Wir stylen die Schaltfläche in CSS mit diesem Klassennamen. Danach haben wir im Schaltflächen -Tag den „Tastentyp“ und die „Tasteklasse“ zusätzlich definiert. Wir haben den Text hinzugefügt, der auf der Schaltfläche angezeigt wird.

Dieses Bild zeigt eine Überschrift und einen Absatz. Am Ende dieses Inhalts wird eine Schaltfläche angezeigt, die wir in HTML erstellt haben.

Jetzt stylen wir diese Schaltfläche mit dem CSS-Skript mit der Eigenschaft "Justify-Content". Im CSS -Skript haben wir das "Stil" -Tag gestartet. Innerhalb des Style -Tags haben wir das “.Dummy-Btn ”, um den Knopf zu stylen, den wir in der Div-Klasse mit diesem Namen erstellt haben. In den Zahnspangen haben wir das "Display: Flex" verwendet. Um eine Flexbox zu verwenden, muss ein Flexbehälter das Anzeigeflexattribut haben. Die einstellbare Länge für die einstellbaren Elemente wird über die Flex -Eigenschaft angegeben. Anschließend setzen wir die Eigenschaft Justify-Incontent.

Die Ausgabe des zuvor generierten Code -Snippets wird im folgenden Bild angezeigt:

Abschluss

In diesem Artikel haben wir die drei CSS -Eigenschaften besprochen, um die Schaltfläche an der gewünschten Position auszurichten. Wir haben die Float-Eigenschaft, die text-alignische Eigenschaft und die Anwaltschaftskontrolleigenschaft verwendet. Jede der genannten Eigenschaften wird ausführlich mit den HTML- und CSS -Codes erläutert. Wir haben den Beispielcode mit dem Sublime Text Editor implementiert. Durch die Verwendung der verschiedenen Eigenschaften erleichtert dieses Tutorial die Ausrichtung der Tasten in CSS.