有序列表中的無序列表

我試圖重新創建以下內容，但是一旦應用了網站CSS，子項顯示爲字母而不是數字。有序列表中的無序列表

點1

1.1點1.1

1.2 1.2點
- 子列表爲1.2
- 另一個子列表爲1.2
1.3 1.3點
點2

下面是它如何顯示在我的網站上的圖片：

感謝您提前你的幫助！

2017-07-18 Amandip Singh

請在您的代碼有問題，顯示你已經嘗試一下，謝謝 – sol

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

你玩了一下用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>

來源

2017-07-18 11:19:21

Hi Matthias。這次真是萬分感謝！它看起來像我的網站有一堆亂七八糟的CSS，我顯然無法訪問，但我已設法使其與您的幫助一起工作。再次感謝！ –

請關注此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樣式。

來源

2017-07-18 10:40:45

如果我的問題得到了解決，他想擺脫 –

我認爲，與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/

來源

2017-07-18 11:08:27 Captain

的字母這很難管理，因爲你總是需要手動編寫子點 –

您可以ul取代ol，禁用list-style並添加「自定義」列表樣式與僞元素的content

這是例如醇 - 段落1的清單（https://fiddle.jshell.net/319o3mek/）：

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

來源

2017-07-18 11:27:43 Captain

有序列表中的無序列表

回答

相關問題