本文介绍了嵌套HTML列表中的不同字体大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在CSS中为我的网站创建了一个嵌套的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 此单位表示元素的计算
此单元通常用于创建可伸缩布局,即使用户更改的大小也能保持页面的垂直节奏 字体。CSS属性font-size
。如果在font-size
属性本身上使用,则它表示继承的 元素的font-size
。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列表中的不同字体大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!