有关HTML中的嵌套列表的疑问

时间：2018-07-12 13:34:55

标签： html css

I'm trying to do this only with HTML and inner Css.：

I'm trying to do this only with HTML and inner Css.

这就是我所拥有的：

我知道我必须将数字1.1与文本的其余部分区分开，但是我不知道如何正确处理。

（记住我不能使用样式标签，也不能添加任何外部文件来定义样式。）

<ol style="width:90%;text-align:justify;">
  <li>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ex urna, nec mattis mauris hendrerit et. Sed sed fringilla leo. In hac habitasse platea dictumst. In vitae hendrerit mi. Pellentesque venenatis diam sed arcu tincidunt viverra. In
      hac habitasse platea dictumst.
      <p style="padding-left:30px;"> 1.1 -
        <div style: "padding-left:30px;"> Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ex urna, nec mattis mauris hendrerit et. Sed sed fringilla leo. In hac habitasse platea dictumst. In vitae hendrerit mi. Pellentesque venenatis diam sed arcu
          tincidunt viverra. In hac habitasse platea dictumst. Nulla facilisi. </p>
  </li>
</ol>

1 个答案:

答案 0 :(得分：0)

如果要设置嵌套列表的样式，则应在结构中使用列表。

Counter和list-style-type在这里可以帮助您以所需的方式进行样式设置。

类似于您的屏幕截图的快速示例：

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol[class] {
  counter-reset: li;
  width: 600px;
  margin: auto;
  text-align: justify;
}

ol[class]>li {
  counter-increment: li;
}

ol[class]>li>ol>li>ol>li:before {
  content: counter(li, lower-roman)'.';
  position: absolute;
  margin-left: -2em;
}
<ol class>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

注意，您最好改用第二级的counter并重设为none list-style-type。该演示在这里向您展示列表样式类型的用法以及如何使用转换为lower-roman的计数器。

仅以计数器CSS递增子级别（例如1.，1.1、1.1.1、1.2、1.2.1 ...）为例。

ol {
  list-style-type: none;
}

ol[class] {
  counter-reset: li-0;
  width: 600px;
  margin: auto;
  text-align: justify;
}
ol ol {
  counter-reset: li-1;
}
ol ol ol {
  counter-reset: li-2;
}

ol[class] > li {
  counter-increment: li-0;
}
ol[class] > li > ol > li {
  counter-increment: li-1;
}

ol[class] > li > ol > li > ol > li {
  counter-increment: li-2;
}
li  {
  position:relative;
}
li:before {
  margin-right:1em;
  position:absolute;
  right:100%;
}
ol[class] >  li:before {
  content: counter(li-0)".";
}
ol[class] > li> ol > li:before {
  content: counter(li-0)"." counter(li-1);
}
ol[class] > li > ol  li > ol > li:before {
  content: counter(li-0)"." counter(li-1)"."counter(li-2);
}

ol {
  color: tomato;
}
ol li p {
  color: orange;
}
ol ol {
  color: turquoise;
}
ol ol li p {
  color: blue;
}
ol ol ol {
  color: gray;
}
ol ol ol li p {
  color: lightgray;
  text-shadow: 0 0 0 black;
}
<ol class>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

这里是可用来测试其他设置的代码笔：https://codepen.io/gc-nomade/pen/VBLMjK

相关问题
最新问题