嵌套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。