Question

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

第1点

1.1点1.1

1.2第1.2点
- 1.2
- 1.2
1.3点1.3
1. 第2点

下面是我在网站上显示的图片：

提前感谢您的帮助！

Answer 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>

Answer 2

请遵循此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样式。

Answer 3

我认为，要使用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/

Answer 4

您可以将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>

有序列表中的无序列表

4 个答案: