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

2022-03-23 00:00:00 html-lists html css

我在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
此单位表示元素的计算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>

相关文章