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

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

等等..

标题和内容(包括数字)的字体大小不同

我的问题是我无法让嵌套的子列表与父列表对齐。它在 fond-sizes 相同时有效，但当我更改它时，对齐方式也会发生变化。

有人对我如何才能最好地实现这一目标有任何想法吗？

这是我目前的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 重置可能会产生与您的页面不同的外观。)