Perché questo CSS non funziona?

Sto cercando di mantenere il div di bar_top_container dal suo contenuto, indipendentemente dalla larghezza della pagina (ovvero entrambi i file dovrebbero apparire sempre sulla stessa riga), tuttavia non funziona quando la larghezza della pagina è troppo piccola per entrambi si adattano su una riga, come posso risolvere questo?Perché questo CSS non funziona?

Stili:

#bar_top_container { position: relative; white-space: nowrap; } 
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; } 
#clear { clear: both; }

HTML:

<div id="bar_top_container"> 
<div id="bar_top_block"> 
    <span class="bold">select1: </span> 
    <select><option value="asdf">asdf</option></select> 
</div> 
<div id="bar_top_block"> 
    <span class="bold">asdf: </span> 
    <select><option value="blah">-- select action --</option></select> 
</div> 
<div id="clear"></div> 
</div>

fonte

2010-06-30 user318747

È possibile avere entrambe le proprietà block e inline per un elemento se lo si visualizza come ... inline-block!

Ecco il tuo codice corretto e di lavoro:

span.bold sono label s
un label è associato al suo elemento form tramite il for/id attributi
bar_top_block è un id utilizzato due volte. Dovrebbe essere un class
senza necessità di float: left; come display: inline-block; viene utilizzato
quindi bisogno di un elemento di compensazione sia
gli .bar_top_block elementi vengono inoltre visualizzati in linea così qualsiasi spazi tra loro è visualizzato come spazio bianco. Per evitare ciò, ho aggiunto un commento che evita gli spazi bianchi pur lasciando leggibile il codice HTML.Il testo all'interno è 'senza spazi' quindi lo sviluppatore saprà che questo commento è lì per un motivo e non deve essere messo a nudo :)
è possibile rimuovere il width su body, è solo qui per l'esempio
si può giocare con la proprietà overflow sul contenitore
come IE7 e al di sotto non comprendere il valore inline-block su elementi di blocco, come div, è necessario utilizzare display: inline e dare l'elemento del hasLayout con, per esempio, zoom: 1;
il modo migliore per indirizzare IE7 e qui sotto e solo i browser è con un commento condizionale
ho aggiunto il supporto per FX2, ma questo è solo per ragioni storiche :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Stack Overflow 3150509 - Felipe</title> 
    <style type="text/css"> 
body { 
    width: 300px; 
} 

#bar_top_container { 
    overflow: auto; 
    white-space: nowrap; 
    border: 1px solid red; 
} 

.bar_top_block { 
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */ 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right: 1px solid #4965BB; 
} 

    </style> 
    <!--[if lte IE 7]><style type="text/css"> 
.bar_top_block { 
    display: inline; 
    zoom: 1; 
} 
    </style> <![endif]--> 
</head> 
<body> 
    <form method="post" action="#" id="bar_top_container"> 
     <div class="bar_top_block"> 
      <label for="select1">Obviously I am a label: </label> 
      <select id="select1"><option value="asdf">asdf</option></select> 
     </div><!-- no whitespace 
     --><div class="bar_top_block"> 
      <label for="select2">I'm a label too and I need a for attribute: </label> 
      <select id="select2"><option value="blah">-- select action --</option></select> 
     </div> 
    </form> 
</body> 
</html>

fonte

2010-06-30 17:38:58 FelipeAls

Per eliminare gli spazi tra gli elementi, puoi usare 'font-size: 0;' sul suo genitore. Quindi, ovunque all'interno di cui hai bisogno, basta definire la giusta dimensione del testo, ad esempio: '.parent {display: inline-block; dimensione carattere: 0; } .parent * {font-size: 12px} '. In bocca al lupo. –

@SlavikMe Non uso questo metodo perché, per una migliore accessibilità, lavoro con l'unità 'em' per font-size e' 0' interromperà tutto. Vedi ad esempio [C14: Utilizzo delle unità em per le dimensioni dei caratteri] (http://www.w3.org/TR/WCAG20-TECHS/C14) Tecnica WCAG 2.0 – FelipeAls

@FelipeAls: Grazie amico! Post molto utile Mi ha davvero salvato la giornata. – YashG99

elementi flottanti avvolgono come white-space: nowrap non funziona per gli elementi di blocco, ma solo per elementi in linea e testo.

fonte

2010-06-30 15:03:43 jantimon

c'è un modo per aggirarlo? – user318747

attendere HTML5;) - ci sono un sacco di soluzioni CSS HTML4. Cerca il layout float. – jantimon

https://bugzilla.mozilla.org/show_bug.cgi?id=488725 – gavenkoa

-1

sto suggerendo di utilizzare un uso forma valida:

<form> 
    <label>select1: <select><option value="asdf">asdf</option></select></label> 
    <label>asdf: <select><option value="blah">-- select action --</option></select></label> 
</form>

Speranza che aiuta.

fonte

2012-12-20 15:53:11

Perché questo CSS non funziona?

risposta

Problemi correlati