Question

我正在尝试创建嵌套的无序列表，并且嵌套的ul标记具有更大的字体大小。这是我正在使用的代码行：

<ul>
<li>myItem 1</li>
<li>myItem 2
   <ul>
     <li>myItem 2a</li>
  </ul>
</li>
<li>myItem 3</li>
<li>myItem 4</li>
</ul>

这是我的style.css：

ul {
    font-size: 1.3em;
    margin-left: 80px; 
    margin-bottom: 20px;
}

我没有足够的声望点来包含照片，但您可以在此处看到代码的输出：

http://crazyrogue.net/ulexample.jpg

任何人都知道为什么嵌套的ul字体大小更大？我希望整个列表具有相同大小的字体。

Answer 1

你的CSS说的是“每次输入<ul>标签时，我应该将字体大小增加1.3倍”。这就是你的内部<ul>变大字体的方式。

要解决此问题，请添加一条规则，说明嵌套的<ul>保留其父级的字体大小：

ul ul {
  font-size:1em;
}

Answer 2

如果您有实时代码而不是图像的链接会有所帮助，但我怀疑有一些全局样式规则会让您失望。最好确保你的css有reset，然后定义你需要的规则。 ul和ul li ul可能会得到不同的规则，因此您可以通过定义两者来解决问题：

ul, ul li ul {
    font-size: 1.3em;
    margin-left: 80px; 
    margin-bottom: 20px;
}

Answer 3

根据您的描述，我认为我遇到了完全相同的问题。麻烦的是你将font-size指定为1.3em。 em是一个相对单位，这使得每个嵌套列表的字体大小相对于其父级。嵌套时，递归应用1.3em，因此下一个列表的字体大小为（1.3 * 1.3）em。如果您有几个级别的嵌套列表，那么您将得到1.3 * 1.3 * 1.3，依此类推。

顺便说一句，值得注意的是，这对所有浏览器都不会有问题 - 我的新Android手机不会给我任何问题，但我的旧手机确实存在问题。

无论如何，这样的事情应该为你解决问题：

ul {
    font-size: 1.3em; /*your original code*/
    margin-left: 80px; 
    margin-bottom: 20px;
}

ul li ul {
    font-size: 1.0em; /*stops nested lists scaling*/
}

这对我有用。当然，第二个ul声明继承了第一个声明中的所有其他声明，所以希望这应该是您需要做的所有声明。

Answer 4

我知道这篇文章有点陈旧，但是如果你想确保你的嵌套列表与使用EM单位时的父级相同，请尝试：

ul {
  font-size: 1em;
}

ul ul {
  font-size: 100%;
}

这告诉那些嵌套列表是父母大小的100％。

HTML - 嵌套的ul标签。字体大小的变化

4 个答案: