嵌套列表項的樣式（與空的容器列表項）

我試圖與列表如下安排：嵌套列表項的樣式（與空的容器列表項）

1. a. TextA 
    b. TextB 
    c. TextC 
2. Text2 
    a. TextA

理想的情況下我也不會做一個單獨的類或標記的第一案。問題是，目前它看起來像這樣：

1. 
    a. TextA 
    b. TextB 
    c. TextC 
2. Text2 
    a. TextA

HTML代碼：

<ol> 
    <li> 
     <ol> 
      <li>TextA</li> 
      <li>TextB</li> 
      <li>TextC</li> 
     </ol> 
    </li> 
    <li>Text2 
     <ol> 
      <li>TextA</li> 
     </ol> 
    </li> 
</ol>

是否有可能用CSS來做到這一點？我們只需要定位FF3，所以我希望有一些高級的CSS選擇器。然而，爲了「檢測」第一種情況，您必須查看ol標籤前的第一個列表項中是否有任何文本，並且我認爲您不能使用CSS來完成此操作。

我還注意到有時候人們會把嵌套的ol放在li標籤下面而不是裏面，但是我在外觀上找不到任何區別。

在此先感謝。

編輯：我沒有提到一些事實證明對這個問題非常重要。我需要將數字對齊到右側而不是左側。我發現了一個解決方案上的另一個計算器的問題，我使用的CSS是：

li { 
    margin-bottom: .5em; 
    margin-left: 25px; 
} 

li:before { 
    display: inline-block; 
    content: counter(item) "."; 
    counter-increment: item; 
    width: 20px; 
    margin-left: -23px; 
}

最後7行讓列表的行爲就像我上文所述，在混亂對不起！

來源

2009-12-15 Marijn

當我將copy and paste your html轉換爲新文檔時，我會得到期望的結果。如果在「1」之後有non-breaking space或類似的字符，我只能在換行符上看到子列表。

來源

2009-12-15 19:25:52 Annie

對不起，我忘了澄清我用來渲染列表數字的CSS！你是對的，但是當我使用上面的CSS時，它的行爲就像我概述的那樣。謝謝！ – Marijn 2009-12-15 19:34:22

你確定這是你正在使用的所有CSS？當我將該CSS與該HTML結合時，我會得到翻倍的數字。 – Annie 2009-12-16 03:43:18

好的，所以玩給出的例子。如果從樣式中刪除最後7行，問題就會奇蹟般地消失。

你提到這條線很重要，但我不知道爲什麼。去除似乎不會影響間距或編號 - 除了使其工作。

以下樣式代碼似乎讓你在原來的問題是什麼 - 包括「右對齊」 - 請糾正我，如果我還是錯的：

li { 
    margin-bottom: .5em; 
    margin-left: 25px; 
} 
ol ol li {list-style-type:lower-alpha;}

來源

2010-02-22 15:30:05

嵌套列表項的樣式（與空的容器列表項）

回答

相關問題