Question

使用不等于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>

Answer 1

使用“rem”单位进行字体大小调整。这解决了字体继承问题。

Johnathan Snook对此有一个great article。

Answer 2

应该工作。

li li {font-size: 100%;}

Answer 3

我希望此列表中的所有li的大小都是ul的父级的0.85em

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

会这样做

Answer 4

我的建议是给第一个<ul>个ID或类，并在那里设置font-size。

Answer 5

（这个答案假设你想要所有的li元素大小相同（你说两个你想要的大小相同，问题大小不同））

字体大小的级联，所以如果你只是将它设置在外部元素上（比如包装div或其他东西），它内部的所有内容都会像你想要的那样缩小一步。

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

#navigation { font-size: 0.85em; }

Answer 6

我同意埃米尔的观点，如果我有足够的重复点（这里是n00b），他就会投票给他。我会像他在第一点中提到的那样使用一个类，所以它可以在同一个文档中重复使用。如果你想要跨浏览器并且正在使用当前的css规范，那么我无法建议一个更好的真实世界的例子......滚动css 3和IE6的死亡！

Answer 7

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

CSS - 使用em的子字体大小

7 个答案: