Scuola forum (scuo.la) - Forum di discussione per le scuole - Gestire parole agli opposti in css nella stessa riga html

- Informatica (https://www.scuolaforum.org/informatica/)

- - Gestire parole agli opposti in css nella stessa riga html (https://www.scuolaforum.org/informatica/421-gestire-parole-agli-opposti-css-nella-stessa-riga-html.html)

Gestire parole agli opposti in css nella stessa riga html

Salve,
ho un facile problema che presenta molte possibili soluzioni e volevo valutare qual'era la più indicata.

Il problema è mettere in una stessa riga di testo due parole, per esempio possiamo immaginare avanti e indietro.

Indietro deve stare sulla sinistra della riga con un margine sinistro di 50 e avanti deve invece stare a destra con un margine destro di 50.

L'una deve essere indipendente dall'altra, cioè se io cancello la parola indietro, la parola avanti non deve subire variazioni.

Immagino ci siano diverse possibilità per fare questo, fra DIV, span e tabelle... ma qual'è la soluzione più semplice e leggera, magari preferendo il css e che sia compatibile con tutti i browser?

Grazie a tutti.

La soluzione migliore credo che sia fare un div e all'interno metterci altri due div o due span. Un esempio potrebbe essere questo:

Il codice CSS:

codice:

.riga{

width: 300px;



}

.sinistra{

text-align: left;

float: left;

margin-left: 50px;

}

.destra{

text-align: left;

float: right;

margin-right: 50px;

}

E questo il codice html:

codice:

<div class="riga">

<span class="destra">avanti</span>

<span class="sinistra">indietro</span>

</div>

Ciao

Alla fine ho trovato più chiara la soluzione dei div con dentro altri div:

Questo l'html:

codice:

<div id="indietro">indietro</div>

<div id="avanti">avanti</div>

E qui il css:

codice:

#indietro {

        float: left;

        margin-left: 50px;

}



#avanti {

        float: right;

        margin-right: 50px;

}

Semplice e funzionale.:ok:
Grazie e ciao