时间戳

首页 > 解决方案 > 项目符号和文本之间的 HTML CSS 多级列表间距

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

问题描述

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

例如：
这就是我得到的
这就是我想要的

正如您在第二张图片中看到的那样，无论“项目符号”的宽度如何，文本都向左对齐（例如，列表在 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>

标签： htmlcsshtml-lists

解决方案

display: table-row在ol > licss 中添加。像那样：

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>

推荐阅读