CSS - larghezza non onorato sul tag span

Ho un problema con uno dei miei span. Si prega di cosider i seguenti stili:CSS - larghezza non onorato sul tag span

.form_container .col1che 
{ 
float: left; 
width: 4%; 
text-align: left;  
} 

.form_container .col2che 
{ 
float: left; 
width: 80%; 
text-align:left; 
} 

.form_container .col3che 
{ 
float: right; 
width: 13%; 
text-align:right; 
}

Questi 3 campate nel mio codice:

<div class="row"><!-- start: "row" --> 
    <span class="col1che">   
      <?php //some db feeds ?>   
    </span> 
    <span class="col2che"> 
      <?php //some db feeds ?> 
    </span> 
    <span class="col3che"> 
      <?php //some db feeds ?> 
    </span> 
    <div class="clear"></div> 
</div><!-- end: "row" -->

Il problema si verifica quando non vi sono dati da visualizzare in "COL1CHE" (o forse anche in nessuno di essi anche se non ne sono sicuro) quando non ci sono dati questa span "collassa" e la sua larghezza non è onorata. Questo succede in Firefox, in IE non "collassa".

ho inserito una classe "chiaro" per vedere se questo aiuta, ma senza alcun risultato.

Qualche idea?

fonte

2009-07-21 chicane

hmmm, che cosa voi ragazzi dite perfettamente senso, ma per qualche ragione, anche dopo l'aggiunta di display: block ancora "crolla" divertente, se posso aggiungere un bordo alla classe colonna mostrerà il larghezza adeguata anche se non ci sono contenuti. ma se non c'è alcun contenuto, nessun confine, semplicemente crolla – chicane

o sì, un'altra cosa, come mai se le mie span non sono state impostate come blocchi e se c'è del contenuto all'interno di esse, allora le larghezze sono impostate correttamente come nello stile foglio? (Non che im discutendo se larghezze sono onorati per gli elementi in linea, im solo curioso il motivo per cui hanno lavorato per me) – chicane

display: block non ti aiuta in questo momento perché quando il galleggiante è attivato, gli elementi vengono automaticamente passati alla modalità blocco, indipendentemente dalla modalità iniziale, quindi la larghezza dovrebbe funzionare.

Il problema potrebbe essere con il tag vuoto <span> che potrebbe non essere visualizzato a causa di qualche regola oscura che non ricordo. Dovresti provare a impedire che la tua span sia vuota, magari aggiungendo un   se il contenuto è vuoto.

fonte

2009-07-21 20:29:40

ok grande, galleggiavano elementi che diventano blocca automaticamente spiega molto in termini di comportamento ho visto sulla mia pagina ... Ho provato la punta nbsp e ha funzionato benissimo grazie ...se qualcuno che sa perché nessun contenuto potrebbe far crollare questo, forse può solo dare un tono a questo curioso comportamento, ma per ora questa è una grande soluzione. – chicane

per fare questo lavoro è sufficiente aggiungere

display: block;

allo stile.

fonte

2009-07-21 20:09:12

Span è un elemento in linea e non è quindi possibile impostare una larghezza. Per impostare una larghezza è necessario prima impostarlo su un elemento di blocco con

display:block;

Successivamente è possibile impostare una larghezza. Dal momento che è un lasso elemento inline nativa, è possibile utilizzare inline-block troppo e sarà anche lavorare in IE:

display:inline-block;

fonte

2009-07-21 20:09:15 richard

larghezza non è onorata perché arco è un elemento inline. Per risolvere questo problema, aggiungere:

display: inline-block;

A seconda della situazione, display: inline-block potrebbe essere migliore di display: block perché qualsiasi contenuto dopo l'intervallo, non sarà costretto su una nuova linea.

fonte

2009-07-21 20:09:59 jimyi

display block ed eventualmente galleggiare left mi ha aiutato.

display: block; 
float: left;

fonte

2014-07-14 11:34:18 Andrei

CSS - larghezza non onorato sul tag span

risposta

Problemi correlati