Elemento a livello di blocco mobile: è necessario impostare la larghezza, se sì, come?

Question

Supponi di avere caselle di testo, elenchi a discesa e pulsanti di invio. Sono tutti elementi in linea. Ciò significa che & Quot; ufficialmente & Quot; le proprietà di margine, riempimento, larghezza e altezza dovrebbero essere ignorate (in pratica non proprio). Se dovessi andare nel modo giusto per impostare l'altezza su un pulsante, scriverei qualcosa come display: block e quindi definire l'altezza. Ma ci sono considerazioni che un elemento a livello di blocco si espanderebbe inaspettatamente, quindi è meglio impostare la sua larghezza su un valore fisso. Il problema è che non conosco la sua larghezza poiché può essere definita in modo dinamico sul testo del pulsante.

Un altro scenario: desidero creare un menu tramite <ul> e <li>. Voglio averlo allineato orizzontalmente, con alcuni elementi raggruppati a sinistra e con alcuni allungati a destra. Sia <=> che <=> sono elementi a livello di blocco. Dal momento che desidero che il mio menu occupi tutto lo spazio orizzontale disponibile, quindi giochi con l'altezza delle voci e che le voci del menu vengano spostate su entrambi i lati, la modalità blocco mi va bene. Userò solo float: left e float: right per raggiungere il compito. Ma ancora una volta l'uso dovrebbe in qualche modo impostare una larghezza per gli elementi del menu, poiché sono elementi a blocchi. Non conosco le loro larghezze perché il testo degli articoli può variare. Ma sembra che tutto sia reso bene così com'è.

Non ho notato alcun problema con entrambi gli elementi incorporati costretti a renderli come elementi a blocchi senza essere flottati o impostati in larghezza, o con l'esempio dell'elemento dell'elenco. Funziona perfettamente su IE7, FF3, Opera 9 e Safari, qualunque sia la versione attuale. La domanda rimane: dovrei preoccuparmi di questi elementi in-to-block o elementi di blocco reali fluttuati ma senza la larghezza impostata o lasciare tutto così com'è? Mi sto perdendo qualcosa o è solo un'altra di quelle cose che semplicemente non dovresti aspettarti di fare nel modo giusto?

Answer 1

  

Supponi di avere caselle di testo, elenchi a discesa   e invia i pulsanti. Sono tutti   linea-elementi. Che significa che   & Quot; quot ufficialmente &; margine, imbottitura, larghezza   e le proprietà di altezza dovrebbero essere   ignorato (in pratica non proprio). Se io   dovevano andare nel modo giusto per impostare il   altezza su un pulsante che vorrei scrivere   qualcosa come display: block and then   definire l'altezza. Ma ci sono   considerazioni che a livello di blocco   L'elemento si espanderebbe da solo   inaspettatamente, quindi è meglio che lo imposti   larghezza a un valore fisso. Il problema   è che non conosco la sua larghezza da allora   può essere definito dinamicamente su   testo del pulsante.

A meno che non ti riferisca a Quirks modello di box di Internet Explorer , non dovresti preoccuparti di qualcosa che si espande o si contrae inaspettatamente. Finché ti occupi di normalizzazione per la variazione del browser , starai bene. Se hai un effetto collaterale inaspettato e indesiderato lungo la strada per progettare la gloria, esegui il debug, poiché si tratta dell'errore del programmatore con cui contendi. I CSS possono essere bizzarri, ma questa non è una scusa appropriata il 95% delle volte per la maggior parte dei browser principali. L'altro 5% di cui non parliamo.

Ecco come capisco il tuo problema:

Volete un menu in virgola mobile <li> in modo da disporre di un menu orizzontale che copra la larghezza della finestra (ciò che l'utente vede "nella finestra del browser") in modo coerente per l'intera larghezza della finestra.

Sembra che tu stia pensando in termini di un design a larghezza fissa, quando davvero ciò che sembra adatto ai tuoi scopi è un design a larghezza fluida. Ciò significa che si crea un design "elastico", che si espande e si contrae in relazione alle dimensioni della finestra del browser dell'utente. Se hai creato il tuo progetto anticipando la larghezza dei pixel impostata su ciascun elemento, puoi probabilmente trovare un modo elegante per mantenere un'intestazione e una navigazione a larghezza fluida, ma hai un'area di contenuto principale a larghezza fissa. Puoi trovare un mezzo felice senza una riprogettazione completa. Questa procedura dettagliata sarà probabilmente quella che stai cercando. Un buon la spiegazione dei termini larghezza fissa e larghezza del fluido può essere trovata qui se non si ha familiarità con il gergo e si desidera dare un'occhiata più da vicino a queste idee.

Un altro per la strada:

L'impostazione di una larghezza su tutti gli elementi mobili non è solo consigliata , ma fa parte dello standard CSS2 secondo W3C.

• Angelina

Answer 2

Stai diventando un po 'troppo stressato, credo :)

Dai un'occhiata a questi collegamenti , in particolare 9.4, 9.5 e 10.3. E ctrl-f & Quot; inline-block & Quot;

Answer 3

Se prendiamo il " Ufficiale " linea che dici che la vita è facile in quanto non dobbiamo preoccuparci di larghezze, altezze e così via per questi elementi.

Non pensare al pixel perfetto, non preoccuparti della minuzia della presentazione, segui gli standard, consenti al browser & amp; i suoi utenti per definire gli stili ...

(se solo fosse davvero così diretto nella " non ufficiale " mondo reale)

Answer 4

Ok, suppongo che la mia domanda non sia stata compresa correttamente. Cosa succederà se non imposto la larghezza per le scatole fluttuanti? Non posso impostarlo, non lo so. perché dipende dal contenuto. Tutte le caselle si ridurranno alla loro larghezza del contenuto? Funziona così in pratica. E ne sono soddisfatto. Esiste una conferma ufficiale che questo comportamento dovrebbe essere previsto?

Aggiunto: Ho trovato qualcosa di interessante qui: http://www.webmasterworld.com/css/3811603.htm

Suggerisco di verificare le raccomandazioni per una spiegazione più tecnica delle differenze, ma in poche parole, il comportamento dei float è cambiato tra css2 (1998) e css2.1 (un paio di mesi del 2005 e poi del 2007). Per css2 era obbligatorio impostare una larghezza sui float, mentre il & Quot; shrink-wrapping & Quot; vedi in ff3 è css2.1. Ciò significa che i browser pre-luglio / 2007 sono conformi alla raccomandazione relativa al loro tempo di produzione quando allungano il contenitore div # per l'intera larghezza della finestra. (Il che non spiega l'Opera, ma ha sempre fatto le sue cose.)

Se è così, allora sono conteso. Come ho già detto, funziona con IE7, FF3, Opera 9 e Safari attuali.

Altri commenti?

Answer 5

(supponendo se ho capito il tuo problema)

Nella maggior parte dei casi non è necessario impostare la larghezza sugli elementi dell'elenco. Ma (sì, c'è un ma qui) se hai un link con display: block (diciamo che vuoi usare la porta scorrevole) devi fare un piccolo trucco:

l'html:

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

E CSS:

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

Se non ti piace, il LINK verrà esteso a tutti i genitori. Il LINK non è l'elemento LIST;) In questo modo si imposta un & Quot; min-width & Quot; a IE6 e non avrai altri problemi.