嵌套HTML列表中的不同字体大小 [英] Different font sizes in nested HTML list
本文介绍了嵌套HTML列表中的不同字体大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
ol li列表类，但是有一些错误，因为每个li都显示在不同的font-size中。虽然我已经定义了它的font-size。
.number_list ol {
font:normal 1.2em 'Arial' ,Helvetica;
text-align:justify;
}
.number_list li{
list-style:decimal;
list-style-position:outside;
font-size:1.2em;
}
.number_list ol li{
list-style:lower-alpha;
list-style-position:outside;
margin-right:5px;
font-size:1.2em;
}
.number_list ol li ol li {
list-style:lower-roman;
list-style-position:outside;
margin-right:5px;
margin-top:5px;
font-size:1.2em;
}
推荐答案
这是因为您使用的是em，您可以改用rem。
em等于应用于相关元素父元素的字体大小。而是将rem应用于元素的根。
发件人MDN
em
此单位表示元素的计算font-size。如果在font-size属性本身上使用，则它表示继承的 元素的font-size。 此单元通常用于创建可伸缩布局，即使用户更改的大小也能保持页面的垂直节奏 字体。CSS属性line-height、font-size、margin-bottom和margin-top通常具有以em表示的值。rem
此单位表示根元素的字体大小(例如<html>元素的font-size)。当用在这个字体上的字号上时 根元素，则表示其初始值。此单元在创建完全可伸缩的布局方面非常实用。如果目标浏览器不支持，则可以实现这样的布局 使用
em单元，尽管这稍微复杂一些。
.number_list ol {
font: normal 1.2rem 'Arial', Helvetica, text-align:justify;
}
.number_list li {
list-style: decimal;
list-style-position: outside;
font-size: 1.2rem;
}
.number_list ol li {
list-style: lower-alpha;
list-style-position: outside;
margin-right: 5px;
font-size: 1.2rem;
}
.number_list ol li ol li {
list-style: lower-roman;
list-style-position: outside;
margin-right: 5px;
margin-top: 5px;
font-size: 1.2rem;
}<div class="number_list">
<ol>
<li>test a</li>
<li>test b</li>
<li>test c</li>
<li>test d
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
</li>
</ol>
<div>这篇关于嵌套HTML列表中的不同字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
