Dev Faq
11
votes

CSS - Enfant Font-taille en utilisant em

Quel est le moyen le plus efficace de faire tous les éléments de la liste imbriqués de la même taille tout en utilisant un EM qui n'est pas égal à 1. Par exemple, je souhaite que tous les LI de cette liste soient dimensionnées à 0,85ème du parent de l'UL. Dois-je créer une classe distincte pour chaque "niveau" de profondeur? 

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

0 commentaires

7 Réponses :

-1
votes

Je veux que tous les LI dans cette liste soient dimensionnés à 0,85ème du parent de UL xxx

ferait cela

0 commentaires
-1
votes 
li { font-size: 0.85em; }
li li { font-size: 1em; }
0 commentaires
0
votes

Ma recommandation serait de donner le premier

    un identifiant ou une classe et définir le la forme de la police là.
0 commentaires
0
votes

(cette réponse suppose que vous voulez que tous les éléments li-éléments de la même taille (vous dites à la fois que vous voulez la même taille et la même taille dans la question))

cascades de la taille de la police, donc si vous venez de la définir. Sur l'élément externe (disons un wrapper div ou quelque chose), tout à l'intérieur d'elle aura une étape plus petite comme (je pense) que vous voulez. xxx

6 commentaires

L'exemple ci-dessus fonctionne comme cela devrait cependant. Même dans IE6, cela ne supporte pas le sélecteur enfant.

Vrai - je travaillais avec le HTML qu'il nous a donné. Il n'a pas spécifié la compatibilité du navigateur, alors je suppose qu'il veut quelque chose qui adhère à la spécification CSS2.1.

Où en question dit-il qu'il veut qu'ils soient différentes tailles?

"Faites tous les éléments de la liste imbriqués de la même taille" vs. "Tous les LI dans cette liste doivent être dimensionnés à 0,85ème du parent de l'UL". Je suis penché vers le premier, mais je ne peux pas en être sûr, et pour une raison quelconque, les gens évoquent ma réponse, alors j'essaie simplement de clarifier.

Assez juste; J'ai non révélé votre réponse parce que cela semble être un véritable malentendu et votre réponse fonctionne. Mais je pense que c'est tout à fait clair - "Faites tous les articles de la liste imbriquée de la même taille" signifie que je suppose, "... les uns des autres". L'autre devis indique simplement qu'ils devraient tous être la valeur calculée de 0,85ème de la taille de la police de base - il n'y a pas d'incohérence que je peux voir.

Cet exemple est un peu spécifique; Et si on a plusieurs listes? Une classe fonctionnerait, mais est-ce sémantique, ou juste redondante?

7
votes

devrait fonctionner. 

li li {font-size: 100%;}

3 commentaires

Cela fait, mais ce n'est pas la manière la plus efficace.

@Bobby, pourquoi n'est-ce pas la manière la plus efficace?

Sans ajouter une balise supplémentaire à votre page c'est le moyen le plus simple.

0
votes

Je suis d'accord avec Emil et je le voterais à ce sujet si j'avais suffisamment de points de rep. (N00B ici). J'utiliserais une classe comme il mentionne dans son premier point, donc sa réutilisable dans le même document. Si vous voulez un navigateur croisé et utilisez la spécification CSS actuelle, je ne peux pas suggérer un meilleur exemple réel ..... Rouler sur CSS 3 et la mort de IE6!

2 commentaires

Merci pour le soutien moral! :)

C'est comme ça que je le ferais et je pense qu'il était injuste de vous marquer pour avoir réellement raison et de donner de bons conseils

9
votes

Utilisez l'unité "REM" pour dimensionnement de la police. Cela corrige le problème de la police-héritage.

Johnathan Snook a un Excellent article à ce sujet.

3 commentaires

Oui, c'est vraiment la meilleure méthode. Je peux ajouter seulement que vous devez utiliser la valeur de chute à l'aide de pixels. Comme ceci: Li {Font-Taille: 8.5px; Taille de la police: 0.85EM;} et vous devez définir la taille de la police de base non sur l'élément corporel comme généralement mais sur HTML.

@Mikeeshva: Votre exemple CSS devrait être {Taille de la police: 8.5px; Taille de la police: 0.85rem;}

Notez que "REM" est uniquement disponible sur IE9 +

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components