CSS - tamaño de letra hijo usando em

¿Cuál es la forma más eficiente de hacer que todos los elementos de la lista anidada tengan el mismo tamaño mientras usa una em que no es 1. Por ejemplo, quiero que todas las li de esta lista tengan un tamaño a 0.85em del padre del ul. ¿Tengo que crear una clase separada para cada "nivel" de profundidad?CSS - tamaño de letra hijo 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>

Fuente

2009-07-23 Jeremy

Debería funcionar.

li li {font-size: 100%;}

Fuente

2009-07-23 20:36:38 Matt

Sí, pero no es la forma más eficiente. –

@Bobby, ¿por qué no es la forma más eficiente? – You

Sin agregar marcas adicionales a su página, esta es la forma más fácil. – Matt

Quiero ser dimensionado todo de Li en esta lista para 0.85em de los padres del ul

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

haría que

Fuente

2009-07-23 20:09:16

-1

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

Fuente

2009-07-23 20:12:33 Quentin

Mi recomendación sería dé el primer <ul> una identificación o clase, y establezca allí el font-size.

Fuente

2009-07-23 20:12:34 jimyi

(Esta respuesta supone que desea todos los li-elementos del mismo tamaño (se dice tanto que desea que el mismo tamaño, y tamaño diferente en la pregunta))

cascadas Tamaño de las letras, así que si sólo configúralo en el elemento externo (digamos un envoltorio Div o algo así), todo dentro de él será un paso más pequeño como (creo) que quieras.

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

#navigation { font-size: 0.85em; }

Fuente

2009-07-23 20:12:43

El ejemplo anterior funciona como debería. Incluso en IE6, eso no es compatible con el selector de niños. –

Es cierto: estaba trabajando con el HTML que nos dio. Él no especificó la compatibilidad del navegador, así que supongo que quiere algo que se adhiere a la especificación CSS2.1. –

¿En qué parte de la pregunta dice que quiere que sean de diferentes tamaños? –

Estoy de acuerdo con Emil, y le votaría si tuviera suficientes puntos de representante (n00b aquí). Utilizaría una clase como la que menciona en su primer punto, por lo que es reutilizable en el mismo documento. Si quieres utilizar el navegador cruzado y estás usando la especificación css actual, entonces no puedo sugerir un mejor ejemplo del mundo real ... ¡continúa con css 3 y la muerte de IE6!

Fuente

2009-07-23 21:21:47 Crayonz

¡Gracias por el apoyo moral! :) –

Es como yo lo haría, y creo que fue injusto marcarlo por tener razón y dar buenos consejos – Crayonz

Utilice la unidad "rem" para el tamaño de la fuente. Esto soluciona el problema de herencia de fuente.

Johnathan Snook tiene un great article en esto.

Fuente

2011-07-09 21:16:53 chotchki

Sí, de hecho es el mejor método. Puedo agregar solo que debes usar el valor de recuperación utilizando píxeles. De esta manera: li {font-size: 8.5px; tamaño de fuente: 0.85em;} Y debe establecer el tamaño de fuente base no en el elemento del cuerpo como habitualmente, sino en html. –

@MikeEshva: el ejemplo de css debe ser {font-size: 8.5px; font-size: 0.85rem;} – chotchki

Sí, ¡el orden importa! –

CSS - tamaño de letra hijo usando em

Respuesta

Cuestiones relacionadas