CSS - dimensione carattere figlio usando em

Qual è il modo più efficiente per rendere tutte le voci di elenco annidate delle stesse dimensioni mentre si utilizza un em che non è uguale a 1. Ad esempio, voglio che tutte le li in questo elenco vengano ridimensionate a 0.85em del genitore dell'ul. Devo creare una classe separata per ogni "livello" di profondità?CSS - dimensione carattere figlio usando em

<html> 
<head> 
    <style type="text/css"> 
     li 
     { 
      font-size: 0.85em; 
     } 
    </style> 
</head> 
<body> 
    <ul> 
     <li>Level 1 item 
      <ul> 
       <li>Level 2 item 
        <ul> 
         <li>Level 3 item</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

fonte

2009-07-23 Jeremy

Dovrebbe funzionare.

li li {font-size: 100%;}

fonte

2009-07-23 20:36:38 Matt

Lo fa, ma non è il modo più efficiente. –

@Bobby, perché non è il modo più efficace? – You

Senza aggiungere markup extra alla tua pagina questo è il modo più semplice. – Matt

Voglio che tutti di Li in questo elenco per essere dimensionato per 0.85em della madre del ul

body > ul { font-size: 0.85em; }

lo farei

fonte

2009-07-23 20:09:16

-1

li { font-size: 0.85em; } 
li li { font-size: 1em; }

fonte

2009-07-23 20:12:33 Quentin

Il mio consiglio sarebbe quello di dare il primo <ul> un ID o classe, e impostare il font-size lì.

fonte

2009-07-23 20:12:34 jimyi

(Questa risposta presuppone che si desidera che tutti li-gli elementi della stessa dimensione (si dice sia che si desidera che la stessa dimensione, e dimensioni diverse in questione))

cascate Dimensione Carattere, quindi se solo impostalo sull'elemento esterno (ad esempio un div wrapper o qualcosa del genere), ogni cosa al suo interno otterrà un gradino più piccolo come (penso) tu voglia.

<div id="navigation"> 
    <ul> 
     <li>...</li> 
     <li> 
     <ul><li>...</li><li>...</li></ul> 
     </li> 
    </ul> 
</div> 

#navigation { font-size: 0.85em; }

fonte

2009-07-23 20:12:43

L'esempio sopra funziona come dovrebbe. Anche in IE6, questo non supporta il selettore di figlio. –

Vero - Stavo lavorando con l'HTML che ci ha dato. Non ha specificato la compatibilità del browser, quindi presumo che voglia qualcosa che rispetti le specifiche CSS2.1. –

Dove nella domanda dice che vuole che siano di dimensioni diverse? –

Sono d'accordo con Emil, e lo voterei se avessi abbastanza punti rep (n00b qui). Vorrei usare una classe come lui menziona nel suo primo punto, quindi è riutilizzabile nello stesso documento. Se vuoi cross browser e stai usando le attuali spec css allora non posso suggerire un esempio migliore del mondo reale ..... rotola su css 3 e la morte di IE6!

fonte

2009-07-23 21:21:47 Crayonz

Grazie per il supporto morale! :) –

È come lo farei, e penso che non sia giusto segnarti per aver effettivamente ragione e dare buoni consigli – Crayonz

Utilizzare l'unità "rem" per ridimensionare i caratteri. Questo risolve il problema dell'ereditarietà dei font.

Johnathan Snook ha uno great article su questo.

fonte

2011-07-09 21:16:53 chotchki

Sì, è davvero il metodo migliore. Posso aggiungere solo tu dovresti usare il valore di fallback usando i pixel. In questo modo: li {font-size: 8.5px; dimensione carattere: 0.85em;} E dovresti impostare la dimensione del carattere di base non sull'elemento body come di solito, ma su html. –

@MikeEshva: il tuo esempio css dovrebbe essere {font-size: 8.5px; font-size: 0.85rem;} – chotchki

sì, l'ordine conta! –

CSS - dimensione carattere figlio usando em

risposta

Problemi correlati