Content Editor - ordered list second level
-
04-10-2020 - |
Question
I wanted to create multilevel ordered list in SharePoint 2013 Content Editor, with continuous counting, including numbers from upper levels.
1. Planes
2. Cars
2.1. Ferrari
2.2. BMW
3. Trains
Is there a way to set numbering automatically without typing each list number value by hand?
Solution
This is more a question about HTML than SharePoint. Edit the source code of your Content Editor WebPart and put this :
<style>
.numbered-list {
counter-reset: item
}
.numbered-list-item {
display:block
}
.numbered-list-item:before {
content: counters(item, ".") ". ";
counter-increment: item
}
</style>
<ol class="numbered-list">
<li class="numbered-list-item">Planes</li>
<li class="numbered-list-item">Cars
<ol class="numbered-list">
<li class="numbered-list-item">Ferrari </li>
<li class="numbered-list-item">BMW </li>
</ol>
</li>
<li class="numbered-list-item">Trains</li>
</ol>
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
EDIT : If you want to keep this user friendly, you can simply let the users create their Numbered list from the interface and target the css to the webpart only.
<style>
#WebPartWPQ2 ol{
counter-reset: item
}
#WebPartWPQ2 li{
display:block
}
#WebPartWPQ2 li:before {
content: counters(item, ".") ". ";
counter-increment: item
}
</style>
OTHER TIPS
It's answer can be quite little bit easy .You have done a great job but it can be more easy . Inspite of using numbered list again and again we can simply write the "ol type" instead of writing number list and can start our ordered list coding. Now moving further we will write LI tag and the content in it the we will simply close it.In this way we can easily create the ordered list