在< li>的第二行缩进文本 [英] Indent on second line of <li> text

问题描述

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

I need to use both discs and list-style-type: lower-roman; to style a list.

但是因为我在:before 伪元素中使用 content:•"; 来创建光盘效果，所以<; li> 文本不对齐.

But because I'm using content: "•"; in a :before pseudo element to create the disc effect, the second line of the <li> text does not line up.

有更简单的方法吗?

例如:

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>

推荐答案

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

You can apply a padding-left to the ul > li to indent it as a whole, make it's position: relative and use position: absolute and left on the :before pseudo-element to adjust the horizontal position of the "•" in relation to the left end of the 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>的第二行缩进文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！