在罗马列表中缩进段落

Question

我需要一个带有低罗马索引的列表，该列表的内容应缩进，索引应带有括号（ii）

例如：

(i)     hello hello hello hello hello hello hello hello hello
        hello hello hello hello hello hello hello hello hello
        hello hello hello hello hello hello hello hello hello

(ii)    world world world world world world world world world
        world world world world world world world world world
        world world world world world world world world world

(iii)   abcde abcde abcde abcde abcde abcde abcde abcde abcde
        abcde abcde abcde abcde abcde abcde abcde abcde abcde
        abcde abcde abcde abcde abcde abcde abcde abcde abcde


finished with the list..
blablah .....

这是我尝试过的：

li {
  margin-bottom: 15px;
}

ol.roman {
  text-align: justify;
  list-style-position: inside;
  counter-reset: list;
}

ol.roman>li {
  list-style: none;
}

ol.roman>li:before {
  padding-right: 20px;
  content: "(" counter(list, lower-roman) ") ";
  counter-increment: list;
}

<ol class="roman">
  <li>
    hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
  </li>
  <li>
    world world wworld world world world world world world world world world world world world world world world world world world world world world world world world world world world world world
  </li>
  <li>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</li>
</ol>
<p>finished with the list..</p>

但是它没有缩进整个段落，我如何实现以上要求？

Answer 1

以前添加我的所有评论。

1. 您不能将<br />作为<li>的兄弟姐妹！
2. 没有</br>！
3. 使用绝对和相对定位。

ol.roman {
  text-align: justify;
  list-style-position: inside;
  counter-reset: list;
}

ol.roman > li {
  list-style: none;
  position: relative;
}

ol.roman > li:before {
  content: "(" counter(list, lower-roman) ") ";
  counter-increment: list;
  position: absolute;
  left: -35px;
  text-align: right;
  display: block;
  width: 25px;
}

<ol  class="roman">
  <li>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
  <li>world world wworld world world world world world world world world world world world world world world world world world world world world world world world world world world world world world</li>
  <li>abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</li>
</ol>
<p>finished with the list..</p>

预览