Lasciate span riempire i rimanenti larghezza?

Ho il seguente li elemento:

<li>
  <span style='float:left; background-color:red'>a</span>
  <span style='float:left; background-color:green'>b</span>
</li>

Vorrei campata a destra per riempire qualsiasi larghezza rimane nel suo padre li. C’è un modo per fare che?

Grazie

InformationsquelleAutor user246114 | 2010-08-17



3 Replies
  1. 22

    Non vuoi float ciascuno di essi di sinistra, solo il primo, e poi fare il secondo display in modalità di blocco:

    <li>
      <span style='float:left; background-color:red'>a</span>
      <span style="display: block; background-color:green;">b</span>
    </li>
    • Questo non è corretto (né l’una né l’altra risposta): Span non riempire il resto della larghezza, riempie l’intera larghezza – da due campate di sovrapposizione.
    • È possibile impedire l’spazia dalla sovrapposizione impostando overflow: hidden; sulla seconda.
  2. 9

    Guardato per la stessa soluzione, ma ho trovato solo questo, che ha lavorato per me:

    <li>
      <span style='display: table-cell; background-color:red'>a</span>
      <span style='display: table-cell; width: 100%; background-color:green'>b</span>
    </li>

    Tutto ciò che serve è solo utilizzo di table-cell visualizzazione e set di riempimento span larghezza al 100%. Tutte le altre soluzioni che ho provato non ha funzionato per me, come previsto.

    • Hai fatto un errore nel 2 ° arco: “display”. Anche le citazioni sono tradizionalmente doppio quando l’impostazione di stile, così dovrebbe essere: style=”…”
    • Grazie, risolto. Cosa dire di “doppi apici tradizioni” – non è sicuro che le tradizioni senso IT/scienza. W3.org non fa preferenza per qualsiasi tipo di offerte btw.

Lascia un commento