对齐问题嵌套的包含有不同字体大小的有序列表

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

只需更改ol li ol的margin-left或padding-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/