對齊問題嵌套含含不同的字體大小

Question

我嘗試創建HTML列表有序列表/ CSS像下面

1. Heading 
1. content one 
2. content two 
3. content three 

2. Heading 
1. content one 
2. content two 
3. content three 

等..

的標題和內容的字體大小（包括數量）是不同的

我的問題是，我不能得到嵌套的子列表與父列表對齊。它適用於喜歡尺寸是相同的，但是當我改變它時，對齊也會改變。

任何人有任何想法，我怎麼能最好地實現這一目標？

這是HTML CSS我到目前爲止

<style> 
ol { 
    list-style: decimal; 
    margin: 30px 0 0 30px; 
} 
ol li { 
    margin-left: 20px; 
    font-size: 20px; 
} 
ol li h2 { 
    font-weight: bold; 
    font-size: 20px; 
} 
ol li ol { 
    margin: 0 0 0 0; 
} 
ol li ol li { 
    margin: 0 0 0 0;  
    font-size: 15px; 
} 
ol li ol li p{ 
    font-size: 15px; 
} 
</style> 

<ol>   
    <li> 
     <h2>Heading 1</h2>   
     <ol> 
      <li> 
       <p>content 1</p> 
      </li> 
      <li> 
       <p>content 2</p> 
      </li> 
     </ol> 
    </li> 

    <li> 
     <h2>Heading 2</h2>   
     <ol> 
      <li> 
       <p>content 1</p> 
      </li> 
      <li> 
       <p>content 2</p> 
      </li> 
     </ol> 
    </li> 
</ol> 

Answer 1

只是改變margin-left或ol li olpadding-left。嘗試不同的值直到獲得所需的結果。

http://jsfiddle.net/LyrsY/（不過的jsfiddle使用CSS復位，可能會給不同的外觀比你的頁面。）

Answer 2

只需添加以下代碼：

ol { 
    margin: 0px; 
    padding: 0px; 
} 

Answer 3

按我理解這就是你想要的。 檢查這個http://jsfiddle.net/ZHLKy/

ol { 
    list-style: decimal inside; 
} 

修訂

給保證金ol li ol &利潤率左到你的P是這樣的：

ol li ol { 
    margin: 0 0 0 1px; 
} 

ol li ol li p{ 
    font-size: 15px; 
    display:inline; 
    margin-left: 3px; 
} 

入住這http://jsfiddle.net/ZHLKy/2/