Вложенный упорядоченный список встроенный условно

Question

У меня есть следующий html, в котором я условно встраиваю ol или ul. Мне нравится видеть, что внедренный список становится смежным списком, по крайней мере, по внешнему виду в конечном выпуске. Какую стилизацию CSS я могу использовать для достижения этой цели?

<ol> 
    <li>Coffee 
    <! -- embedded unordered or ordered list - begin --> 
    <ul> 
    <li>Apple</li> 
    <li>Orange</li> 
    </ul> 
    <! -- embedded unordered or ordered list - end --> 
    </li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ol> 

HTML Выход:

1. Coffee 
    . Apple 
    . Orange 
2. Tea 
3. Milk 

Обязательный выход:

1. Coffee 
2. Apple 
3. Orange 
4. Tea 
5. Milk 

Answer 1

Вам нужно будет включать Javascript для того, чтобы достичь этого.

Попробуйте немного JQuery:

$(function() { 
    $('ol li').each(function(index) { 
     $('li:has(ul li)').after(this); 
    }); 
}); 

Here's a fiddle