Question

我已经在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;
  }

Answer 1

那是因为您使用的是em，您可以使用rem代替。

em等于适用于相关元素的父级的字体大小。而rem应用于元素的根。

来自MDN

<强> EM

此单位表示元素的计算font-size。如果在font-size属性本身上使用，则表示继承   元素font-size。

此单元通常用于创建可缩放的布局，即使用户更改了大小，也可以保持页面的垂直节奏。   字体。 CSS属性line-height，font-size，margin-bottom   并且margin-top通常具有以em表示的值。

<强> REM

此单位表示根元素的字体大小（例如font-size元素的<html>）。当在字体大小上使用时   根元素，它代表它的初始值。

此单元可用于创建完美可扩展的布局。如果目标浏览器不支持，则可以实现这种布局   使用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>

Answer 2

em单元在font-size声明中使用时表示父元素的字体大小。因此，您在嵌套元素中累积设置越来越大的尺寸。

要在整个元素中使用相同的字体大小，只需将其设置在最外层元素上即可。这意味着保留font:normal 1.2em 'Arial' ,Helvetica;规则并删除font-size规则（或将其更改为font-size: 1em，但只有在其他一些CSS规则可以设置其大小时才需要这样做。

Answer 3

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

“Ems”（em）：“em”是一个可扩展的单元，用于Web文档媒体。 em等于当前的font-size，例如，如果是文件的字体大小是12pt，1em等于12pt。 Ems是本质上是可扩展的，所以2em等于24pt，.5em等于6pt，由于以下原因，Ems在Web文档中越来越受欢迎可扩展性和移动设备友好性。

来自：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

简而言之，您将每个子元素的字体大小设置为比之前大120％。要修复它，只需使用绝对单位设置字体大小 - 例如pt。

您可以参考此CodePen获取示例：https://codepen.io/masterdoctor/pen/GmJEbN?editors=1100

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

3 个答案: