Problema de CSS con tamaños relativos

StackOverflow https://stackoverflow.com/questions/483898

  •  20-08-2019
  •  | 
  •  

Pregunta

Tengo este código 

<html>
 <head>
  <style type="text/css">
   .frame                  {width: 50em; border: 1px solid black}
   .frame  label           {width: 20em; display: block; text-align:right; border: 1px solid green} 
   .frame label span       {width: 20em; display: block; font-size: .5em; border: 1px solid red; text-align: right}
  </style>
 </head>
 <body>
  <div class="frame">
   <label>
    Label
    <span>
     Span
    </span>
   </label>
  </div>
 </body>

El <span> rojo se establece en 20em. Pero debería ser tan grande como el verde <label>. Sin embargo, quiero mantener el tamaño de fuente pequeño en la parte roja. Desafortunadamente, incluso si font-size es la mitad de grande, no puedo usar 40em para obtener el mismo tamaño. ¿Alguna idea de cómo resolver ese problema?

¿Fue útil?

Solución

Si no & # 8217; t declara un ancho para el elemento SPAN (o width:100%), su propiedad display:block ya se aseguraría de que su ancho sea el ancho total disponible.

Otros consejos

px no es una opción, ya que quiero mantener el diseño " escalable " ;. Me acabo de enterar que funciona con & Quot; ancho: 100% & Quot; por el lapso.

Tenga en cuenta que el uso de em es en relación con el tamaño del em que contiene . Cuando usa px o pt, su tamaño es relativo a la resolución de la pantalla. Es por eso que estaba obteniendo un ancho de 20em para el span rojo dentro de una etiqueta de 20em.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top