有序列表中的无序列表

Question

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

点 1

1.1 点 1.1

1.2点1.2
- 1.2 的子列表
- 1.2 的另一个子列表
1.3点1.3
1. 第 2 点

下面是它在我的网站上的显示方式的图像：

提前感谢您的帮助！

Answer 1

遵循此 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 2

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

你必须和 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 4

您可以将ol替换为ul，禁用list-style并添加"custom"伪元素content的列表样式

这是第 1 段 (https://fiddle.jshell.net/319o3mek/) 的 ol-sublist 示例：

HTML

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

CSS

.sub-ol-1 {
  list-style: none;
}

.sub-ol-1 > li {
  position: relative;
}

.sub-ol-1 > li:before {
  position: absolute;
  left: -34px;
  width: 30px;
  text-align: right;
}

.sub-ol-1 > li:nth-child(1):before {content: '1.1.';}
.sub-ol-1 > li:nth-child(2):before {content: '1.2.';}
.sub-ol-1 > li:nth-child(3):before {content: '1.3.';}
.sub-ol-1 > li:nth-child(4):before {content: '1.4.';}
.sub-ol-1 > li:nth-child(5):before {content: '1.5.';}
.sub-ol-1 > li:nth-child(6):before {content: '1.6.';}
.sub-ol-1 > li:nth-child(7):before {content: '1.7.';}
.sub-ol-1 > li:nth-child(8):before {content: '1.8.';}
.sub-ol-1 > li:nth-child(9):before {content: '1.9.';}
.sub-ol-1 > li:nth-child(10):before {content: '1.10.';}
/* more if needed */

有序列表中的无序列表

Unordered lists within ordered lists

css

list

nested

html-lists

sublist