使用HTML或CSS樣式縮進，如Word中的

我需要幫助才能獲得a., b.樣式的內部縮進而不是2.2.1., 2.2.2.。從HTML ordered list indent to keep original numbering 使用HTML或CSS樣式縮進，如Word中的

發現原來CSS代碼我的代碼：

<style> 
    ol { counter-reset: item } 
    li { display: block } 
    li:before { content: counters(item, ".") ". "; counter-increment: item } 
</style> 

<ol> 
    <li>One</li> 
    <li> 
     Two 
     <ol> 
      <li>Two one</li> 
      <li> 
       Two two 
       <ol type="a"> 
        <li>Two two a</li> 
        <li>Two two b</li> 
       </ol> 
      </li> 
      <li>Two three</li> 
     </ol> 
    </li> 
    <li>Three</li> 
</ol>

什麼我越來越：

1. One 
2. Two 
    2.1. Two one 
    2.2. Two two 
     2.2.1. Two two a 
     2.2.2. Two two b 
    2.3. Two three 
3. Three

我需要什麼：

1. One 
2. Two 
    2.1. Two one 
    2.2. Two two 
     a. Two two a 
     b. Two two b 
    2.3. Two three 
3. Three

來源

2013-07-31 BentCoder

既然你不需要預先與部分編號內部列表，您可以添加使用counter拿到信的附加規則：

ol { 
    counter-reset: item; 
} 
li { 
    list-style: none; 
} 
li:before { 
    content: counters(item, ".")". "; 
    counter-increment: item 
} 
ol ol ol li:before { 
    content: counter(item, lower-alpha)". "; 
}

詳情：http://jsfiddle.net/kmAJ6/3/。應該使用現有的HTML。

來源

2013-07-31 19:59:05 SlightlyCuban

沒有額外的元素屬性和a，b ..的縮進長度與數字相同。謝謝 – BentCoder

這是一個聰明的解決方案，看起來像我將不得不讀一些有關計數器.. – MightyPork

@MightyPork謝謝！老實說，我瞭解了一點關於這個的計數器。我只是希望有一個更具規劃性的方式來做到這一點，而不是針對特定的列表級別。 – SlightlyCuban

你的type屬性不起作用，因爲你的CSS取代了默認的編號。解決這個問題的方法之一是更新你的css規則，只將目標設定爲前兩個級別，並讓第三級別使用默認編號。這會讓你的type屬性生效。

http://jsfiddle.net/TbjcV/

.level1, 
.level2{ 
    counter-reset: item 
} 

.level1 > li, 
.level2 > li{ 
    display: block 
} 
.level1 > li:before, 
.level2 > li:before{ 
    content: counters(item, ".") ". "; 
    counter-increment: item 
}

<ol class="level1"> 
    <li>One</li> 
    <li> 
     Two 
     <ol class="level2"> 
      <li>Two one</li> 
      <li> 
       Two two 
       <ol type="a" class="level3"> 
        <li type="a">Two two a</li> 
        <li>Two two b</li> 
       </ol> 
      </li> 
      <li>Two three</li> 
     </ol> 
    </li> 
    <li>Three</li> 
</ol>

來源

2013-07-31 16:59:51

+1作爲另一種解決方案。 – BentCoder

我得到這個：

<style> 
ol.cnt { counter-reset: item } 
ol.cnt > li { display: block } 
ol.cnt > li:before { content: counters(item, ".") ". "; counter-increment: item } 
</style>

HTML：

<ol class="cnt"> 
    <li>One</li> 
    <li> 
     Two 
     <ol class="cnt"> 
      <li>Two one</li> 
      <li> 
       Two two 

       <ol type="a"> 
        <li>Two two a</li> 
        <li>Two two b</li> 
       </ol> 

      </li> 
      <li>Two three</li> 
     </ol> 
    </li> 
    <li>Three</li> 
</ol>

有點亂，但似乎WO RK。

來源

2013-07-31 17:01:44 MightyPork

我覺得很整齊！謝謝。 – BentCoder

+1以及..... – BentCoder

使用HTML或CSS樣式縮進，如Word中的

回答

相關問題