Flytt CSS -knappen til høyre

Et godt designet nettsted kan støtte deg til å utvikle en sterk første innvirkning på de målrettede brukerne. Det gir nettstedet seerne et positivt forbrukerinntrykk og gjør det jevnere for dem å bla gjennom og få tilgang til det. Bortsett fra de andre viktige elementene, trenger ethvert nettstedsknapper for å fungere ordentlig. Knapper gjør det mulig for forbrukerne å engasjere seg i en plattform og utføre en handling ved å velge alternativene. Gjennom anvendelsen av de mange stilistiske attributtene til knappen, blir CSS -knappene distribuert for å pryde nettstedene. Du kan legge til farger, endre størrelser, justering av en knapp osv.

Justering refererer til plasseringen av noe på en bestemt måte, som enten kan være tekst eller knapper. Knappjusteringen refererer til hvordan du vil plassere knappene dine, i.e. til venstre, høyre eller midt på websiden.

Denne artikkelen vil diskutere bruken av CSS for å justere en knapp til høyre. Ulike CSS -egenskaper er tilgjengelige for tekst- eller knappposisjonering. Vi kan gjøre dette ved å bruke float-egenskapen, tekst-justering og rettferdiggjøring av rettferdig innhold.

Flyte egenskap for å justere knappen til høyre

CSS Float -egenskapen bestemmer hvordan dataene er strukturert og plassert på en webside.

Vi må først opprette en knapp i HTML -filen. Vi bruker den sublime tekstredigereren for å sette denne illustrasjonen i praksis. HTML -koden for å opprette en enkel knapp vises i følgende bilde:

I denne koden opprettet vi en knapp i HTML -filen. Vi brukte taggen som brukes som en beholder for å pakke HTML -elementene inni den. Attributtene "Div Class" brukes til å style HTML -filen med CSS. Vi la til en tekst som vises på knappen.

Du kan se knappen vi nettopp opprettet og vist på venstre side av siden som standard.

Det neste vi trenger å gjøre er å plassere denne knappen på høyre hjørne av siden. CSS -skriptet brukes til å oppnå dette. Knappen er plassert til høyre ved hjelp av CSS Float -attributtet. “.Button_btn ”refererer til DIV -klassen som vi opprettet i HTML -koden for å lage en knapp. Nå kan vi få tilgang til og bruke designen på knappen som er opprettet i denne beholderen. Vi bruker "Float" -egenskapen i den og setter verdien til "riktig". Det gir oss noen verdier - ingen, høyre, venstre, innledende og arve. Siden vi har tenkt å plassere knappen til høyre, bruker vi derfor den "riktige" verdien for float -egenskapen i CSS.

Det forrige skriptet, når den ble utført, gir utgangen som vises i følgende bilde. Knappen er plassert til høyre for skjermen når float -eiendommenes verdi er satt til “Høyre”.

Tekst-juster egenskap for å justere knappen til høyre

Den neste egenskapen vi bruker for å justere en knapp til høyre er den "tekst-align" egenskapen i CSS. Vi opprettet en HTML -fil. Inne i taggen til HTML opprettet vi en overskrift som vises øverst på websiden ved å bruke

stikkord. Deretter opprettet vi en knapp inne i klassen. Definer en tekst som vises på knappen.

Dette vil få oss ut output websiden presentert på bildet. Teksten som vi la til, vises øverst til høyre på siden mens den rett under den er knappen som vi opprettet.

For å flytte denne knappen som vi opprettet i forrige kode til høyre side av siden, utøver vi egenskapen "tekst-align". Vi bruker "tekst-align" i CSS-skriptet. CSS -koden er gitt nedenfor:

Den tekst-justerte egenskapen brukes til å plassere elementet i de forskjellige retningene. Denne egenskapen gir oss visse verdier for å plassere elementene inkludert venstre, høyre, sentrum, innledende, arve og rettferdiggjøre. Siden vi ønsker at knappen skal plasseres på høyre hjørne av nettsiden, bruker vi den "riktige" verdien for "tekst-align" -egenskapen i CSS.

Nå jobber vi med CSS -skriptet for å style knappen som vi opprettet i HTML -filen. “.”Henviser til Div -klassen som vi opprettet i HTML, etterfulgt av klassenavnet. Dette er vårt eksempel på en "knapp". Dette lar oss style elementet i den nevnte klassen. Egenskapen "tekst-align" er satt til den "riktige" verdien for å få knappen til å justere seg til høyre hjørne av websiden.

Du kan se hvordan den enkle anvendelsen av egenskapen "tekst-align" hjelper deg i justeringen av knappen til ønsket posisjon. For våre behov justerte vi det til høyre, og utgangsbildet viser en knapp med "trykk markør" -tekst rettet på høyre side.

Rettferdiggjør egenskap for å justere knappen til høyre

Den siste egenskapen som vi vil utføre for å få knappen på linje med høyre hjørne, er egenskapen "Justify-Content". I de foregående tilfeller var det første vi gjorde å lage en HTML -fil. Du kan gjøre det i hvilken som helst tekstredigerer eller Visual Studio; Vi implementerer det på den sublime tekstredigereren.

I HTML -filen, inne i taggen, opprettet vi først en overskrift med

stikkord. Deretter opprettet vi en dummy -data ved hjelp av

stikkord. De

Tag brukes når vi skriver avsnittene i HTML. Vi startet da . I et HTML -dokument betegner DIV -taggen en partisjon eller segment. HTML -elementene er plassert inne i "Div" -merket og deretter blir CSS -stylingen brukt. Vi spesifiserte Div Class Name “Dummy_Btn”. Vi styler knappen i CSS ved å bruke dette klassenavnet. Etterpå, inne i knappekoden, definerte vi "knappetypen" og "knappeklassen", i tillegg. Vi la til teksten som vises på knappen.

Dette bildet viser en overskrift og et avsnitt. Nederst i dette innholdet vises en knapp som vi opprettet i HTML.

Nå styler vi denne knappen med CSS-skriptet ved å bruke egenskapen "Justify-Content". I CSS -skriptet startet vi "Style" -koden. Inne i stilmerket har vi ".dummy-btn ”for å style knappen som vi opprettet i Div-klassen med dette navnet. Inne i selene brukte vi “Display: flex”. For å bruke en flexbox, må en flex -beholder ha Display Flex -attributtet. Den justerbare lengden for de justerbare elementene er spesifisert via Flex -egenskapen. Vi setter deretter eiendommen til rettferdig innhold.

Utgangen fra det tidligere genererte kodebiten vises i følgende bilde:

Konklusjon

I denne artikkelen diskuterte vi de tre CSS -egenskapene for å justere knappen til ønsket posisjon. Vi benyttet floategenskapen, tekst-justerende eiendom og eiendoms-innholdseiendommen. Hver av de nevnte egenskapene blir forklart i detalj med HTML- og CSS -kodene. Vi implementerte eksempelkoden ved hjelp av den sublime tekstredigereren. Ved å bruke de flere egenskapene, gjør denne opplæringen justeringen av knappene i CSS enkel.