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

我想做一个嵌套的无序列表和嵌套的ul标签有一个更大的字体大小。下面是我使用的代码行：HTML - 嵌套的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字号较大？我希望整个列表具有相同大小的字体。

来源

2014-01-15 user3196289

如果你有一个链接到实时代码而不是图像，但我怀疑有一些全球风格的规则会让你失望。这将是很好的，以确保你有一个reset你的CSS，然后定义你需要的规则。 ul和ul li ul很可能得到不同的规则，所以你可以通过定义两个固定：

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

来源

2014-01-15 01:28:43 Zac

从你的描述，我想我只是有相同的问题。麻烦的是你指定的字体大小为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声明继承了第一个ul声明中的所有内容，所以希望这应该是您需要做的所有事情。

来源

2014-08-05 21:25:00 Seej500

你的CSS说什么是“每次我输入一个<ul>标签，我应该增加1.3倍的字体大小”。这就是你的内心<ul>得到更大的字体大小。

为了解决这个问题，添加说嵌套规则<ul>，使其保持他们的父母的字体大小：

ul ul { 
    font-size:1em; 
}

来源

2014-08-05 23:03:29

如果像我一样，你已经选择了''ul' css作为一个孩子，即'main ul'，这将不起作用，因为'ul ul'不是特定的。只需使用'main> ul'。内部列表应该继承它们的大小。 – Keith

我知道这个帖子是有点老了，但如果你想确保你的嵌套列表留与使用EM单元时父母大小相同，请尝试：

ul { 
    font-size: 1em; 
} 

ul ul { 
    font-size: 100%; 
}

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

来源

2017-04-26 02:41:24 apmeyer

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

回答

相关问题