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的{{1}}或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＆amp;保证金 - 留给你的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/

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

3 个答案: