float:right dentro un <li> che mi estende il <li>

**Cerebro** · 28-03-2008, 19:54

Uso una lista per una specie di menù orizzontale, questo il css:

codice:

.blah { overflow:hidden; zoom:1; }
.blah ul { margin:0; padding:0; list-style-type:none; }
.blah ul li { float:left; padding:0; }
.blah ul li a:link,
.blah ul li a:visited,
.blah ul li a:active { font-family:verdana, arial, tahoma, helvetica, sans-serif; padding:0 10px; font-size:11px; display:block; font-weight:normal; color:black; text-decoration:none; float:left; overflow:hidden; zoom:1; }

<div class="blah">
<ul>[*]aaa[*]bbbbbb[*]c[/list]
</div>

Il che mi produce appunto una lista orizzontale del tipo:

aaa bbbbbb c

Niente di particolarmente trascendentale, se non fosse che se inserisco uno span float:right dentro i li così:

codice:

[*]bbbbbb<span style="float:right"></span>

Avviene che tutti i[*] è come se diventassero dei block e me li ritrovo uno sopra l'altro così:

aaa
bbbbbb
c

Ci sto ammattendo... possibile che non si possano inserire dei float semplici dentro i[*] senza scassare tutto e mantenendo l'orizzontalità?

**Mich_** · 31-03-2008, 09:08

I[*] sono di tipo blocco di default.
Con il float li affianchi, ma restano di tipo blocco.

Il problema e` che il float right nello span, rende blocco anche lo span, e lo sposta sulla destra dello spazio disponibile. Se i tuoi[*] non hanno width, lo spazio disponibile e` definito dal <div> o dal <body>, per cui il[*] successivo va su una nuova riga.

Ora non so quale significato semantico abbia lo <span>, per cui non so come consigliarti per correggere.

**Cerebro** · 15-04-2008, 18:09

Il problema e` che il float right nello span, rende blocco anche lo span, e lo sposta sulla destra dello spazio disponibile. Se i tuoi[*] non hanno width, lo spazio disponibile e` definito dal <div> o dal <body>, per cui il[*] successivo va su una nuova riga.

Sì era quello il problema. Cmq ho abbozzato annidando completamento i tag del tipo div.span_____/span./div e aggeggiando con gli sfondi di etrambi per ottenere l'effetto voluto.

Discussione: float:right dentro un <li> che mi estende il <li>

Strumenti discussione

Ricerca discussione

Visualizza

float:right dentro un <li> che mi estende il <li>

Permessi di invio