有序列表中的无序列表

时间:2017-07-18 10:31:33

标签: css list nested html-lists sublist

我正在尝试重新创建以下内容,但是一旦应用了网站CSS,子点将显示为字母而不是数字。

  1. 第1点

    1.1点1.1

    1.2第1.2点

    • 1.2
    • 的子列表
    • 1.2
    • 的另一个子列表

    1.3点1.3

    1. 第2点
  2. 下面是我在网站上显示的图片:

    enter image description here

    提前感谢您的帮助!

4 个答案:

答案 0 :(得分:1)

你必须使用css,使用计数器。请看下面的例子:

ol { counter-reset: item; list-style-type: none; }
ol > li:before { content: counters(item, ".") ". "; counter-increment: item }
ul { list-style-type: disc; }
<ol>
   <li>Point 1
      <ol type="1">
         <li>Point 1.1</li>
         <li>Point 1.2
            <ul>
               <li>Sublist for 1.2</li>
               <li>Another Sublist for 1.2</li>
            </ul>
         </li>
         <li>Point 1.3</li>
      </ol>
   </li>
   <li>Point 2</li>
</ol>

答案 1 :(得分:0)

请遵循此HTML代码。

<ol>
    <li>Point</li>
    <ol type="a">
        <li>Point 1.1</li>
        <li>Point 1.2
            <ul style="list-style-type:disc">
              <li>Sublist for</li>
              <li>Sublist for</li>
            </ul> 
        </li>
        <li>Point 1.3</li>
    </ol>
    <li>Point 2</li>
 </ol>

无需使用任何外部CSS样式。

答案 2 :(得分:0)

我认为,要使用CSS / HTML实现此目的,您需要将ul与一些样式一起使用并更改列表中的文本

<ol>
    <li>Point</li>
    <ul style="list-style:none;padding-left:10px;">
        <li>1.1. Point 1.1</li>
        <li>1.2. Point 1.2
            <ul style="list-style-type:disc">
                <li>Sublist for</li>
                <li>Sublist for</li>
            </ul> 
        </li>
        <li>1.3. Point 1.3</li>
    </ul>
    <li>Point 2</li>
</ol>

https://fiddle.jshell.net/agdL1tam/

答案 3 :(得分:0)

您可以将ol替换为ul,禁用list-style并添加&#34; custom&#34;使用伪元素{/ 1}列出样式

这是第1段(https://fiddle.jshell.net/319o3mek/)的ol子目录的例子:

HTML

content

CSS

<ol>
    <li>Point</li>
    <ul class="sub-ol-1">
        <li>Point 1.1</li>
        <li>Point 1.2
            <ul style="list-style-type:disc">
              <li>Sublist for</li>
              <li>Sublist for</li>
            </ul> 
        </li>
        <li>Point 1.3</li>
    </ul>
    <li>Point 2</li>
</ol>