在 <li> 文本的第二行缩进

Question

我需要同时使用光盘和list-style-type: lower-roman;来设置列表样式。

但是因为我在:before伪元素中使用content: "•";来创建光盘效果，所以<li>文本的第二行没有对齐。

有没有更简单的方法可以做到这一点？

例如：

i•Some list text which
goes onto the second line            //need this to be in line with the text above
i  sub list text1
ii sub list text2

我目前正在使用

ul>li:before {
content: "•";
}
ol{
margin-left: 24px;
}
ol, ul{
list-style-type: lower-roman
}

<ul>
<li>Some list text which goes onto the second line
<ol>
<li>sub list text1</li>
<li>sub list text1</li>
<ol>
</li>
</ul>

Answer 1

您可以将padding-left应用于ul > li以将其作为一个整体缩进，使其position: relative并在:before伪元素上使用position: absolute和left来调整"•"相对于li左端的水平位置：

ul>li {
padding-left: 15px;
position: relative;
}
ul>li:before {
content: "•";
position: absolute;
left: 5px;
}
ol {
margin-left: 24px;
}
ol,
ul {
list-style-type: lower-roman
}

<ul>
<li>Some list text which goes onto the second line. Some list text which goes onto the second line. Some list text which goes onto the second line
<ol>
<li>sub list text1</li>
<li>sub list text1</li>
<ol>
</li>
</ul>

Answer 2

你需要使用列表样式位置

ul>li:before {
content: "•";
margin-right:5px;

}
ul{
list-style-position: inside;
}
ol{
margin-left: 24px;
list-style-position: outside;  /* or NOT, it depends on what you like  to do */
}
ol, ul{
list-style-type: lower-roman
}

<ul>
<li>Some list text which goes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second linegoes onto the second line
<ol>
<li>sub list text1</li>
<li>sub list text1</li>
<ol>
</li>
</ul>