Ausrichtung Ausgabe geordnete Liste verschachtelt andere Schriftgröße

Question

im enthaltend versuchen, wie unten

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

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

und so weiter ..

die Schriftgröße der Überschrift und Inhaltsliste in HTML/CSS zu erstellen (einschließlich Anzahl) sind unterschiedlich

Mein Problem ist, dass ich die verschachtelte Kindliste nicht mit der Elternliste ausrichten kann. Es funktioniert, wenn die Grundgrößen gleich sind, aber wenn ich es ändere, ändert sich auch die Ausrichtung.

Wer hat irgendwelche Ideen, wie ich das am besten erreichen kann?

dies ist die html css i

<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

ändern Sie einfach die margin-left oder padding-left von ol li ol bisher. Probieren Sie verschiedene Werte aus, bis Sie das gewünschte Ergebnis erhalten.

http://jsfiddle.net/LyrsY/ (verwendet jedoch jsFiddle ein CSS-Reset, die ein anderes Aussehen als Ihre Seite geben können.)

Answer 2

einfach diesen Code hinzu:

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

Answer 3

Per ich verstehe das sind Sie wollen. prüfen diese http://jsfiddle.net/ZHLKy/

ol { 
    list-style: decimal inside; 
} 

AKTUALISIERT

geben Marge ol li ol & margin-left zu Ihrem P wie folgt aus:

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

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

prüfen diese http://jsfiddle.net/ZHLKy/2/