如何解决项目符号和文本之间的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。