在 <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

您需要使用 list-style-position

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>

Answer 2

您可以将 padding-left 应用于 ul > li 以将其作为一个整体缩进，使其成为 position: relative 并使用 position: absolute 和 left :before伪元素调整“•”相对于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>

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

Indent on second line of <li> text

html

css

html-lists