CSS -juster -knappen høyre
Egenskaper for å justere høyre knapp i CSS
- Ved hjelp av tekst-justeringsegenskaper.
- Ved hjelp av float -eiendom.
- Ved hjelp av Justice-Content-egenskapen.
Eksempel 1: Juster knappen til høyre ved å bruke den tekst-justerte egenskapen
Opprett HTML -filen din for å lage knappen, og for å justere denne knappen, må vi opprette CSS. Vi skal utdype de gitte eksemplene i vårt visuelle kodestudio. Så vi må generere HTML -filen, og koden til denne HTML -filen limes inn nedenfor på bildet.
Her har vi opprettet to forskjellige knapper og deretter ønsker å justere en knapp til høyre, slik at du enkelt kan lære forskjellen mellom den originale knappen og riktig justering -knapp. Så for denne justeringen av knapper, må vi bruke CSS-tekst-align-egenskapen. Når vi bruker denne egenskapen på knappen som vi har opprettet, setter knappen sin plassering til høyre side av siden. I CSS -filen kan du se hvordan du bruker denne egenskapen.
CSS -kode
Her er CSS -koden også gitt nedenfor. Vi bruker CSS for å gi stil eller gi justering til knappene våre. I denne koden kan du se at vi bruker egenskapen "tekst-align".
Først bruker vi “.”Og navnet på vår første knapp, som er“ BTN-original ”her, og inne i de krøllete seler på denne første knappen, bruker vi den“ tekst-align ”-egenskapen og setter den til“ Venstre.”Vi skriver tittelen på den andre knappen, som er“ BTN-Right ”, ved å sette. “” Igjen og inne i de krøllete seler, bruker vi igjen den samme egenskapen, og denne gangen justerer vi knappen til den "høyre" siden av siden eller skjermen.
Produksjon:
Utgangen viser to knapper der den originale knappen vises på venstre side, og deretter forskyves knappen til høyre side av skjermen.
Eksempel nr. 2: Juster knappen til høyre ved hjelp av float -egenskapen
I denne HTML -filen designer vi igjen to knapper. Navnet på den første knappen er "knapp" her, og navnet på den andre knappen er "høyre knapp.”I dette eksemplet skal vi bruke en annen eiendom til å justere knappen til høyre. Eiendommen vi bruker i CSS for denne koden er "Float" -egenskapen. Det fungerer det samme som egenskapen "tekst-align" gjør.
CSS -kode
I denne CSS -filen bruker vi float -egenskapen. Float -egenskapen i CSS brukes til å flyte elementet eller objektet eller knappen til høyre og venstre side. “.Original ”brukes til å bruke design på“ Original ”-knappen. Inne i dette bruker vi "Float" -egenskapen og setter den til "Venstre", slik at den originale knappen er plassert på venstre hjørne av skjermen. Inne i ".høyre "-knapp, vi setter" høyre "til" Float "-egenskapen. Dette vil plassere vår andre knapp på høyre hjørne av skjermen.
Produksjon
I bildet over er knappen rettet mot høyre hjørne av skjermen. Her har vi brukt "Float" -egenskapen, og du kan se at den viser utdataene som den samme som den "tekstjusterte" egenskapen viste.
Eksempel nr. 3: Juster knappen til høyre ved å bruke egenskapen Justify-Content
I det tredje eksemplet oppretter vi bare en knapp ved hjelp av DIV-klassen og bruker deretter den tredje egenskapen til CSS, som er egenskapen "Justify-Content". Denne egenskapen justerer også knappen til venstre eller høyre, men vi må justere knappen bare til høyre
CSS -kode
I denne CSS -filen endrer vi også "bakgrunn" -fargen til "rosa" og setter "polstringen" til "10px" fra topp og bunn og "0" for høyre og venstre. "Displayet" vi bruker her er "Flex", og bruker deretter den tredje egenskapen til CSS som er "Justify-Content" og setter den til "Flex-End", slik at denne "Flex-End" setter knappen til høyre slutt.
Produksjon
Bakgrunnsfargen er rosa her, mens vi bruker "bakgrunnsfarge" til "rosa.”Knappen er i høyre ende når vi bruker egenskapen“ Justify-Content ”i vår CSS-fil med dette eksemplet.
Eksempel 4
I dette fjerde eksemplet har vi laget seks forskjellige knapper ved hjelp av knappeklassen i HTML. Nå bruker vi forskjellige farger for alle seks knappene og justerer tre knapper til "høyre" ved hjelp av CSS -egenskapen, og tre er på det originale stedet, som er "venstre", der vi ikke bruker noen eiendom.
CSS -kode
Fargen på den første knappen er "grønn", og koden for dette er "#4CAF50". Vi trenger ingen grense, så grensen er “ingen.”“ Fargen ”på teksten som er skrevet i disse knappene er“ hvit.”Topp- og bunnpaddings er“ 15px ”, og venstre og høyre paddings er“ 32px ”. Den "tekst-align" er sentrert, så teksten inne i knappen vises i midten av knappen. "Tekstdekorasjonen" er også "ingen.”“ Font-size ”er satt til“ 16px ”. Topp- og bunnmarginene er “4px”, og høyre og venstre marginer er “2px”. "Pekeren" er her for å brukes som en "markør.”
Så justerer vi denne knappen til høyre, så vi har "flottøren" her, som er satt til "høyre.”Endre også fargen på neste knapp og bruk" rød "her, og ikke bruk noen egenskap for å justere knappen, så som standard vises denne knappen på venstre side. Den fjerde knappen, "bakgrunnsfarge", er hvit, så vi endrer også "fargen" på teksten til "svart" og flyter denne fjerde knappen til høyre. Etter å ha endret fargen på femte og sjette knapper til Gray, bruker vi igjen “Float: Right” med den sjette knappen. La oss sjekke hvordan det vil vise disse knappene i nettleseren.
Produksjon
I denne utgangen har vi seks knapper der tre knapper er gjengitt på høyre side der vi bruker eiendommen “Float.”Så ved hjelp av denne egenskapen flyter tre knapper til høyre side. Og også tre knapper er på venstre side, da vi ikke brukte noen egenskap for disse tre knappene. Fargene på disse knappene er også forskjellige.
Konklusjon
Denne opplæringen har diskutert de tre egenskapene som CSS gir for å justere knappen til høyre hjørne av skjermen. Vi har forklart alle tre egenskapene til CSS i detalj som er "tekst-align", "Float" og "Justify-Content" -egenskaper. Vi har generert tre forskjellige eksempler, og vi har brukt de alternative egenskapene i hvert eksempel og vist utgangen til alle kodene også, slik at du enkelt kan få dette poenget om hvordan du skal justere knappen til høyre. Denne opplæringen vil hjelpe deg med å justere knappen din til høyre side ved å bruke egenskapene til CSS.