Przycisk wyrównania CSS w prawo
Właściwości do wyrównania prawego przycisku w CSS
- Korzystanie z właściwości Text-Align.
- Za pomocą właściwości Float.
- Korzystanie z właściwości Justify-Content.
Przykład nr 1: Wyrównaj przycisk w prawo za pomocą właściwości tekstu tekstu
Utwórz swój plik HTML do tworzenia przycisku i do wyrównania tego przycisku, musimy utworzyć CSS. Będziemy rozwinąć podane przykłady w naszym studio kodu wizualnego. Musimy więc wygenerować plik HTML, a kod tego pliku HTML jest wklejona poniżej na obrazie.
Tutaj utworzyliśmy dwa różne przyciski, a następnie chcemy wyrównać jeden przycisk w prawo, aby łatwo poznać różnicę między przyciskiem oryginalnym a prawym przyciskiem wyrównania. Tak więc, aby to wyrównać przyciski, musimy wykorzystać właściwość CSS Text-align. Kiedy używamy tej właściwości na przycisku, który utworzyliśmy, przycisk ustawia swoją pozycję na prawą stronę strony. W pliku CSS możesz zobaczyć, jak korzystać z tej właściwości.
Kod CSS
Tutaj kod CSS jest również podany poniżej. Używamy CSS, aby zapewnić styl lub dostosować do naszych przycisków. W tym kodzie widać, że używamy właściwości „Wysyłki tekstu”.
Najpierw używamy „.”I nazwa naszego pierwszego przycisku, który jest„ BTN-Original ”tutaj, a wewnątrz kręconych aparatów ortodontycznych tego pierwszego przycisku używamy właściwości„ Wyliczanie tekstu ”i ustawiamy ją na„ lewym.„Piszemy tytuł drugiego przycisku, który jest„ BTN-Right ”, umieszczając. „” Ponownie i wewnątrz klastrowych aparatów ortodontycznych ponownie używamy tej samej właściwości, a tym razem wyrównujemy przycisk do „prawej” strony strony lub ekranu.
Wyjście:
Wyjście pokazuje dwa przyciski, w których oryginalny przycisk jest wyświetlany po lewej stronie, a następnie przycisk jest przesunięty na prawą stronę ekranu.
Przykład nr 2: Wyrównaj przycisk w prawo za pomocą właściwości Float
W tym pliku HTML ponownie projektujemy dwa przyciski. Nazwa pierwszego przycisku to „przycisk” tutaj, a nazwa drugiego przycisku to „Prawy przycisk.”W tym przykładzie użyjemy innej właściwości do wyrównania przycisku w prawo. Właściwość, której używamy w CSS tego kodu, to właściwość „pływak”. Działa tak samo jak właściwość „Aligacja tekstu”.
Kod CSS
W tym pliku CSS używamy właściwości Float. Właściwość Float w CSS jest używana do pływania elementu, obiektu lub przycisku po prawej i lewej stronie. „„.oryginał ”służy do stosowania projektu do przycisku„ oryginalnego ”. Wewnątrz stosujemy właściwość „Float” i ustawiamy ją na „lewy”, aby oryginalny przycisk został umieszczony w lewym rogu ekranu. W środku ".Przycisk prawy ”ustawiamy„ w prawo ”na właściwość„ pływak ”. To umieści nasz drugi przycisk w prawym rogu ekranu.
Wyjście
Na powyższym obrazie przycisk jest wyrównany do prawego rogu ekranu. Tutaj użyliśmy właściwości „zmiennoprzecinka” i widać, że wyświetla dane wyjściowe tak samo, jak pokazana właściwość „align”.
Przykład nr 3: Wyrównaj przycisk w prawo za pomocą właściwości Justify-Content
W trzecim przykładzie tworzymy tylko jeden przycisk za pomocą klasy DIV, a następnie używamy trzeciej właściwości CSS, która jest właściwością „justify-content”. Ta właściwość wyrównuje również przycisk w lewo lub w prawo, ale musimy wyrównać przycisk tylko w prawo
Kod CSS
W tym pliku CSS zmieniamy również kolor „tła” na „różowy” i ustawiamy „wyściółkę” na „10px” z góry i dolnej oraz „0” dla prawej i lewej strony. „Wyświetlacz”, którego tu używamy, to „Flex”, a następnie użyj trzeciej właściwości CSS, która jest „justify-content” i ustaw go na „Flex-end”, więc ten „flex-end” ustawia przycisk po prawej stronie koniec.
Wyjście
Kolor tła jest tutaj różowy, ponieważ używamy „koloru tła” do „różu.„Przycisk jest na prawym końcu, ponieważ używamy właściwości„ Justify-Content ”w naszym pliku CSS tego przykładu.
Przykład nr 4
W tym czwartym przykładzie utworzyliśmy sześć różnych przycisków za pomocą klasy przycisku w HTML. Teraz używamy różnych kolorów dla wszystkich sześciu przycisków i wyrównujemy trzy przyciski do „prawej” za pomocą właściwości CSS, a trzy znajdują się na oryginalnym miejscu, które jest „lewe”, gdzie nie używamy żadnej właściwości.
Kod CSS
Kolor pierwszego przycisku to „Zielony”, a kod to „#4CAF50”. Nie potrzebujemy żadnej granicy, więc granica nie jest „Brak.„„ Kolor ”tekstu napisanego w tych przyciskach jest„ biały.„Górne i dolne wybiegi to„ 15px ”, a lewe i prawe wybiegi to„ 32px ”. „Wyrównanie tekstu” jest wyśrodkowane, więc tekst wewnątrz przycisku pojawia się na środku przycisku. „Dekoracja tekstu” jest również „Brak.„„ Rozmiar czcionki ”jest ustawiony na„ 16px ”. Górne i dolne marginesy to „4px”, a prawe i lewe marginesy to „2px”. „Wskaźnik” jest tutaj użyty jako „kursor."
Następnie wyrównujemy ten przycisk w prawo, więc mamy tutaj „pływak”, który jest ustawiony na „Prawo.”Ponadto zmień kolor następnego przycisku i zastosuj„ czerwony ”tutaj i nie używaj żadnej właściwości do wyrównania przycisku, więc domyślnie ten przycisk wyświetli się po lewej stronie. Czwarty przycisk, „kolor tła”, jest biały, więc zmieniamy również „kolor” tekstu na „czarny” i unosimy ten czwarty przycisk po prawej stronie. Po zmianie koloru piątego i szóstego przycisku na szary ponownie używamy „Float: Right” z szóstym przyciskiem. Sprawdźmy, jak pokaże te przyciski w przeglądarce.
Wyjście
W tym wyjściu mamy sześć przycisków, w których trzy przyciski są renderowane po prawej stronie, gdzie używamy właściwości „Float.”Tak więc z pomocą tej właściwości trzy przyciski unoszą się po prawej stronie. A także trzy przyciski są po lewej stronie, ponieważ nie użyliśmy żadnej właściwości dla tych trzech przycisków. Kolory tych przycisków są również różne.
Wniosek
W tym samouczku omówiono trzy właściwości, które CSS zapewnia wyrównanie przycisku do prawego rogu ekranu. Wyjaśniliśmy wszystkie trzy właściwości CSS, które są właściwościami „aligacjami tekstowymi”, „float” i „justify-content”. Wygenerowaliśmy trzy różne przykłady i zastosowaliśmy alternatywne właściwości w każdym przykładzie i wyświetliśmy również dane wyjściowe wszystkich kodów, abyś mógł łatwo uzyskać ten punkt na temat wyrównania przycisku w prawo. Ten samouczek pomoże ci wyrównać przycisk do prawej strony za pomocą właściwości CSS.