question CSS avec des tailles relatives

J'ai ce codequestion CSS avec des tailles relatives

<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>

Le <span> rouge est réglé sur 20em. Mais il devrait être aussi grand que le vert <label>. Je veux garder la petite police dans la partie rouge. Malheureusement, même si le font-size est moitié moins grand, je ne peux pas utiliser 40em pour obtenir la même taille. Une idée de comment résoudre ce problème?

Source

2009-01-27 2ni

Si vous ne déclarez pas de largeur pour l'élément SPAN (ou width:100%), sa propriété display:block s'assurerait déjà que sa largeur serait la largeur totale disponible.

Source

2009-01-27 16:00:43 Gumbo

px n'est pas une option car je veux garder le design "évolutif". Je viens de découvrir, que cela fonctionne avec "largeur: 100%" pour la durée.

Source

2009-01-27 15:46:57 2ni

Oui, largeur: 100%; le définirait à 100% de l'élément contenant - ce qui pourrait être un meilleur design pour vous. –

vous devriez mettre cela dans votre question plus tôt. Je pensais que tout ce que vous voulez, c'est résoudre ce problème. (comme indiqué dans votre question): -s – andyk

Notez que l'utilisation de em est relative to the containing em size. Lorsque vous utilisez px ou pt, votre taille est relative à la résolution de l'écran. C'est pourquoi vous obtenez une valeur de 20em de la largeur pour le span rouge à l'intérieur d'une étiquette 20em.

Source

2009-01-27 16:21:43 null

question CSS avec des tailles relatives

Répondre

Questions connexes