Pulsante CSS Allinea a destra
Proprietà per allineare il pulsante destro in CSS
- Utilizzo della proprietà allineata al testo.
- Usando la proprietà float.
- Utilizzando la proprietà giustificata.
Esempio n. 1: pulsante allinea a destra usando la proprietà allinea
Crea il tuo file HTML per la creazione del pulsante e per allineare questo pulsante, dobbiamo creare il CSS. Stiamo per elaborare gli esempi forniti nel nostro studio di codice visivo. Quindi, dobbiamo generare il file HTML e il codice di questo file HTML viene incollato di seguito nell'immagine.
Qui, abbiamo creato due pulsanti diversi e quindi desideriamo allineare un pulsante a destra in modo da poter imparare facilmente la differenza tra il pulsante originale e il pulsante di allineamento destro. Quindi, per questo allineamento dei pulsanti, dobbiamo utilizzare la proprietà CSS allineate. Quando utilizziamo questa proprietà sul pulsante che abbiamo creato, il pulsante imposta la sua posizione sul lato destro della pagina. Nel file CSS, puoi vedere come utilizzare questa proprietà.
Codice CSS
Qui, il codice CSS è anche riportato. Usiamo CSS per dare stile o dare allineamento ai nostri pulsanti. In questo codice, puoi vedere che stiamo usando la proprietà "allineate al testo".
Innanzitutto, usiamo il “."E il nome del nostro primo pulsante, che è" btn-original "qui, e all'interno delle parentesi graffe di questo primo pulsante, utilizziamo la proprietà" allineate al testo "e lo impostiamo su" sinistra."Scriviamo il titolo del secondo pulsante, che è" BTN-Right ", mettendo. “” Ancora una volta e all'interno delle parentesi graffe, usiamo di nuovo la stessa proprietà, e questa volta allineiamo il pulsante al lato “destro” della pagina o dello schermo.
Produzione:
L'uscita mostra due pulsanti in cui il pulsante originale viene visualizzato sul lato sinistro, quindi il pulsante viene spostato sul lato destro dello schermo.
Esempio n. 2: allineare il pulsante a destra usando la proprietà float
In questo file HTML, progettiamo di nuovo due pulsanti. Il nome del primo pulsante è "pulsante" qui e il nome del secondo pulsante è "pulsante destro."In questo esempio, useremo un'altra proprietà per allineare il pulsante a destra. La proprietà che utilizziamo nel CSS di questo codice è la proprietà "float". Funziona lo stesso della proprietà "allineate al testo".
Codice CSS
In questo file CSS, utilizziamo la proprietà float. La proprietà float in CSS viene utilizzata per galleggiare l'elemento o l'oggetto o il pulsante ai lati destra e sinistra. IL ".originale "viene utilizzato per applicare la progettazione al pulsante" originale ". All'interno di questo, applichiamo la proprietà "float" e la impostiamo su "sinistra", quindi il pulsante originale viene posizionato sull'angolo sinistro dello schermo. Dentro il ".Pulsante a destra ", impostiamo la proprietà" a destra "sulla proprietà" float ". Questo posizionerà il nostro secondo pulsante nell'angolo destro dello schermo.
Produzione
Nell'immagine sopra, il pulsante è allineato all'angolo destro dello schermo. Qui, abbiamo usato la proprietà "float" e puoi vederlo visualizzare l'output uguale alla proprietà "allineamento del testo" mostrato.
Esempio n. 3: allineare il pulsante a destra utilizzando la proprietà giustificata
Nel terzo esempio, creiamo solo un pulsante utilizzando la classe Div e quindi utilizziamo la terza proprietà di CSS, che è la proprietà "giustificata-contenuto". Questa proprietà allinea anche il pulsante a sinistra o a destra, ma dobbiamo allineare il pulsante solo a destra
Codice CSS
In questo file CSS, cambiamo anche il colore di "sfondo" in "rosa" e impostiamo la "imbottitura" su "10px" dall'alto e in basso e "0" per destra e sinistra. Il "display" che utilizziamo qui è "Flex", quindi utilizzare la terza proprietà di CSS che è "giustificata" e lo imposta su "Flex-end", quindi questo "Flex-end" imposta il pulsante a destra FINE.
Produzione
Il colore di sfondo è rosa qui, poiché usiamo "color sfondo" per "rosa."Il pulsante è all'estremità giusta in quanto utilizziamo la proprietà" giustificati "nel nostro file CSS di questo esempio.
Esempio # 4
In questo quarto esempio, abbiamo creato sei pulsanti diversi usando la classe dei pulsanti in HTML. Ora, utilizziamo colori diversi per tutti e sei i pulsanti e allineiamo tre pulsanti alla "destra" usando la proprietà CSS e tre sono sul luogo originale, che è "a sinistra", dove non usiamo alcuna proprietà.
Codice CSS
Il colore del primo pulsante è "verde" e il codice per questo è "#4Caf50". Non abbiamo bisogno di alcun bordo, quindi il confine è "nessuno."Il" colore "del testo scritto all'interno di questi pulsanti è" bianco."Le imbottiture superiore e inferiore sono" 15px "e le imbottiture sinistro e destro sono" 32px ". Il "align di testo" è centrato, quindi il testo all'interno del pulsante appare al centro del pulsante. Anche la "delerazione del testo" è "nessuno."La" dimensione del carattere "è impostata su" 16px ". I margini superiore e inferiore sono "4px" e i margini destro e sinistro sono "2px". Il "puntatore" è qui per essere usato come "cursore."
Quindi allineiamo questo pulsante a destra, quindi abbiamo il "galleggiante" qui, che è impostato su "a destra."Inoltre, cambia il colore del pulsante successivo e applica" rosso "qui e non utilizzare alcuna proprietà per allineare il pulsante, quindi per impostazione predefinita, questo pulsante verrà visualizzato sul lato sinistro. Il quarto pulsante, "sfondo", è bianco, quindi cambiamo anche il "colore" del testo in "nero" e galleggiamo questo quarto pulsante a destra. Dopo aver cambiato il colore del quinto e sesto pulsanti in grigio, usiamo di nuovo "Float: Right" con il sesto pulsante. Controlliamo come mostrerà questi pulsanti sul browser.
Produzione
In questo output, abbiamo sei pulsanti in cui tre pulsanti sono resi sul lato destro dove usiamo la proprietà “Float."Quindi, con l'aiuto di questa proprietà, tre pulsanti galleggiano sul lato destro. Inoltre, tre pulsanti sono sul lato sinistro, poiché non abbiamo usato alcuna proprietà per questi tre pulsanti. I colori di questi pulsanti sono anche diversi.
Conclusione
Questo tutorial ha discusso delle tre proprietà che il CSS fornisce per allineare il pulsante all'angolo destro dello schermo. Abbiamo spiegato in dettaglio tutte e tre le proprietà del CSS che sono "allineate sul testo", "galleggianti" e proprietà "giustificate". Abbiamo generato tre diversi esempi e abbiamo applicato le proprietà alternative in ciascun esempio e visualizzato anche l'output di tutti i codici, in modo da poter ottenere facilmente questo punto su come allineare il pulsante a destra. Questo tutorial ti aiuterà ad allineare il pulsante al lato destro usando le proprietà di CSS.