项目符号和文本之间的 HTML CSS 多级列表间距

问题描述

我正在尝试创建一个多级列表，但我无法在“项目符号”和文本之间获得正确的间距。

例如：
This is what I'm getting
This is what I want

正如您在第二张图片中看到的，无论“项目符号”的宽度如何（例如，列表在 Word 中的功能如何），文本都向左对齐。

这是我的代码：

div {
    margin: 5px 0 0 0;
    padding: 0px;
    font-size: 12px;
    color: #777777;
}
ul,ol,li {
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 8pt;
    color: #505050;
    line-height: 1.4;
    margin: 0 !important;
}
ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}
ol > li {
    display: table;
    counter-increment: item;
    padding-top: 1em;
    color: #282828;
    font-weight: bold;
}
ol > li:before {
    content: counters(item,".") ". ";
    display: table-cell;
    padding-right: 1em;
}
li ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}
li ol > li:before {
    content: counters(item,".") " ";
    display: table-cell;
    padding-right: 1em;
}
li ol ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}
li ol ol > li:before {
    content: counter(item,lower-roman) ". ";
    display: table-cell;
    padding-right: 1em;
}
.Boxl {
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    width: 735px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fafafa;
}

<div class="Boxl" style="padding: 0px 10px 0px 10px;">
    <ol>
        <li>
            heading 1
            <ol>
                <li>
                    heading 1.1
                    <ol>
                        <li>Roman i</li>
                        <li>Roman ii</li>
                        <li>Roman iii: This is an example of a really long text to see what happens with regards to a hanging indent when the text gets carried over to the next line.</li>
                    </ol>
                </li>
                <li>heading 1.2</li>
                <li>heading 1.3</li>
                <li>heading 1.4</li>
                <li>heading 1.5</li>
                <li>heading 1.6</li>
                <li>heading 1.7</li>
                <li>heading 1.8</li>
                <li>heading 1.9</li>
                <li>heading 1.10</li>
            </ol>
        </li>
        <li>heading 2</li>
    </ol>
</div>

解决方法

在 css 中将 display: table-row 添加到 ol > li。像这样：

ol > li {
    display: table-row;
    ...
}

片段：

div {
    margin: 5px 0 0 0;
    padding: 0px;
    font-size: 12px;
    color: #777777;
}

ul,ol,li {
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 8pt;
    color: #505050;
    line-height: 1.4;
    margin: 0 !important;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol > li {
    display: table-row;
    counter-increment: item;
    padding-top: 1em;
    color: #282828;
    font-weight: bold;
}

ol > li:before {
    content: counters(item,".") ". ";
    display: table-cell;
    padding-right: 1em;
}

li ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}
li ol > li:before {
    content: counters(item,".") " ";
    display: table-cell;
    padding-right: 1em;
}

li ol ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}

li ol ol > li:before {
    content: counter(item,lower-roman) ". ";
    display: table-cell;
    padding-right: 1em;
}

.boxl {
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    width: 735px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fafafa;
}

<div class="boxl" style="padding: 0px 10px 0px 10px;">
    <ol>
        <li>
            Heading 1
            <ol>
                <li>
                    Heading 1.1
                    <ol>
                        <li>Roman i</li>
                        <li>Roman ii</li>
                        <li>Roman iii: This is an example of a really long text to see what happens with regards to a hanging indent when the text gets carried over to the next line.</li>
                    </ol>
                </li>
                <li>Heading 1.2</li>
                <li>Heading 1.3</li>
                <li>Heading 1.4</li>
                <li>Heading 1.5</li>
                <li>Heading 1.6</li>
                <li>Heading 1.7</li>
                <li>Heading 1.8</li>
                <li>Heading 1.9</li>
                <li>Heading 1.10</li>
            </ol>
        </li>
        <li>Heading 2</li>
    </ol>
</div>