如何调整CSS

编号上嵌套列表我要让嵌套有序的内部li列表中的内容列表ol：如何调整CSS

1. Lorem ipsum 
1.1 Lorem ipsum 
10.1.1 Lorem ipsumLorem ipsum 
10.1.2 Lorem ipsum 
10.1.3 Lorem ipsum 
10.2 Lorem ipsum

我想这SCSS（在计算器中发现），但不幸的是，我希望10.2我10.1.4。

您可以查看拨弄着这里的问题https://jsfiddle.net/bqw457ef/

来源

2017-06-22 pazio

这是你的HTML结构规则？ –

我使[小提琴]（https://jsfiddle.net/MrLister/adbqnhyc/），但我没有得到你的CSS 10.1.1，只是1.1.1。那么你能提供一个证明问题的[mcve]吗？ –

顺便说一句，你的CSS很多是多余的。最后一条规则已经由倒数第二条规定。 –

这是你所需要的。以下是代码。更新您的ol > li

ol { 
 
    counter-reset: item; 
 
} 
 

 
ol > li { 
 
    counter-increment: item; 
 
    content: counters(item, "."); 
 
} 
 

 
ol ol > li { 
 
    display: block; 
 
} 
 

 
ol ol > li:before { 
 
    content: counters(item, ".") " "; 
 
    margin-left: -20px; 
 
} 
 

 
ol ol ol > li:before { 
 
    content: counters(item, ".") " "; 
 
    margin-left: -20px; 
 
}

<ol> 
 
    <li>Lorem 
 
    <ol> 
 
     <li>Lorem ipsum 
 
     <ol> 
 
      <li>Lorem ipsum dolor 
 
      </li> 
 
      <li>sit amet, consectetur 
 
      </li> 
 
      <li>adipiscing elit, sed 
 
      </li> 
 
     </ol> 
 
     </li> 
 
     <li>dolor sit</li> 
 
    </ol> 
 
    </li> 
 
</ol>

来源

2017-06-22 08:19:09 Manish

您关闭<li>第二级太快。第三级完成后关闭它。

ol { 
 
    counter-reset: item; 
 
} 
 

 
ol>li { 
 
    counter-increment: item; 
 
} 
 

 
ol ol>li { 
 
    display: block; 
 
} 
 

 
ol ol>li:before { 
 
    content: counters(item, ".") " "; 
 
    margin-left: -20px; 
 
} 
 

 
ol ol ol>li:before { 
 
    content: counters(item, ".") " "; 
 
    margin-left: -20px; 
 
}

<ol> 
 
    <li> 
 
    <h2>Personal information</h2> 
 
    <ol> 
 
     <li> 
 
     <ol> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
     </ol> 
 
     </li> 
 
     <li></li> 
 
     <li></li> 
 
     <li></li> 
 
    </ol> 
 
    </li> 
 
</ol>

来源

2017-06-22 08:16:37 Gerard

如何调整CSS

回答

相关问题