代码之家 › 专栏 › 技术社区 › dina

在罗马列表中缩进段落

html-lists css html

dina · 技术社区 · 6 年前

我需要一个罗马索引较低的列表,列表的内容应该缩进,索引应该有括号(i i)

例如。:

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

但它并没有缩进整段,我怎么能做到以上呢?

1 回复 | 直到 6 年前

Praveen Kumar Purushothaman 6 年前

添加我以前的所有评论。

你不能有 <br /> 作为兄弟姐妹 <li> !
没有 </br> !
使用绝对和相对定位。

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>

预览