嵌套html列表中不同的字体大小

我在CSS中为我的网站创建了一个嵌套的ol,li列表类，但是由于每个li都显示在不同的font-size中，导致一些错误。尽管我已经定义了font-size。嵌套html列表中不同的字体大小

.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; 
    }

来源

2017-04-16 surabhi sanduja

那是因为你正在使用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>

来源

2017-04-16 16:20:35 dippas

-1

的 '错误' 是您正在使用em。