11

1に等しくないemを使用しながら、ネストされたすべてのリストアイテムを同じサイズにする最も効率的な方法は何ですか。たとえば、このリスト内のすべてのliのサイズをulの親の0.85emに設定します。深さの「レベル」ごとに個別のクラスを作成する必要がありますか？

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

7 に答える 7

9

フォントのサイズ設定には「rem」単位を使用します。これにより、フォントの継承の問題が修正されます。

Johnathan Snookには、これに関するすばらしい記事があります。

于 2011-07-09T21:16:53.480 に答える
7

動作するはずです。

li li {font-size: 100%;}
于 2009-07-23T20:36:38.800 に答える
0

<ul>最初にIDまたはクラスを指定し、そこに設定することをお勧めしますfont-size。

于 2009-07-23T20:12:34.387 に答える
0

（この回答は、すべてのli要素が同じサイズであると想定しています（質問では、同じサイズと異なるサイズが必要であると両方とも言います））

フォントサイズはカスケードされるので、外側の要素（ラッパーdivなど）に設定するだけで、その中のすべてが（私が思うに）望むように1ステップ小さくなります。

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

#navigation { font-size: 0.85em; }
于 2009-07-23T20:12:43.513 に答える
0

私はエミルに同意し、十分な担当者ポイント（ここではn00b）があれば、これに投票します。私は彼が最初のポイントで述べたようなクラスを使用するので、同じドキュメントで再利用できます。クロスブラウザが必要で、現在のcss仕様を使用している場合は、より良い実例を提案することはできません..... css 3とIE6の死をロールバックしてください！

于 2009-07-23T21:21:47.557 に答える
-1

このリストのすべてのliのサイズをulの親の0.85emに設定したい

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

それをします

于 2009-07-23T20:09:16.953 に答える
-1 
li { font-size: 0.85em; }
li li { font-size: 1em; }
于 2009-07-23T20:12:33.187 に答える