Пробел между вложенным списком

Question

Я строю сайт, но столкнулся с небольшой проблемой. Я создал вложенный список с html, но я хочу видеть некоторые пробелы между выборами.

   <ul> 
       <li>Mini onderhoud 
        <ul> 
         <li>Computer stofvrij maken.</li> 
        </ul> 
       </li> 
       <li>Klein onderhoud 
        <ul> 
         <li>Computer stofvrij maken.</li> 
         <li>Computer controleren op malware (virussen, spyware, adware, trojans, ...).</li> 
         <li>Opruimen van onnodige software en bestanden.</li> 
         <li>Computer controleren op fouten.</li> 
        </ul> 
       </li> 
       <li>Groot onderhoud 
        <ul> 
         <li>Computer stofvrij maken.</li> 
         <li>Computer controleren op malware (virussen, spyware, adware, trojans, ...).</li> 
         <li>Opruimen van onnodige software en bestanden.</li> 
         <li>Computer controleren op fouten.</li> 
         <li>Backup maken van alle bestanden.</li> 
        </ul> 
       </li> 
       <li>Deluxe onderhoud 
        <ul> 
         <li>Computer stofvrij maken.</li> 
         <li>Computer formatteren en Windows herinstalleren.</li> 
         <li>Software (o.a. Microsoft Office, anti-virus, firewall, ...) herinstalleren.</li> 
         <li>Backup maken van alle bestanden.</li> 
        </ul> 
       </li> 
      </ul> 

Как получить пробелы между каждым первым элементом li? Итак, мне нужны пробелы между Mini onderhoud и Klein onderhoud, между Klein onderhoud en Groot onderhoud и т. Д. Я пробовал с br, но это не XHTML 1.1 Strict. Любые другие решения?

СПАСИБО!

Answer 1

Назначьте элементы <li> с именем класса.

<li class="spacing">

Добавить стиль CSS:

li.spacing { 
    margin-bottom: 10px; 
} 

Answer 2

Используйте CSS классы ANC - можно присвоить класс (скажем) «верхнего уровня» на свой верхний уровень <li> элементы, которые вы хотите, чтобы дать Расстояние между этим, то в вашем CSS есть:

.toplevel li {margin:0 0 5px 0;} 

Answer 3

Если я вас правильно понял вы хотите:

li { 
    margin-bottom: 1em; /* or what ever */ 
} 

li li { 
    margin-bottom: 0; 
} 

Answer 4

Добавить класс к первому (родителю) ул <ul class="navi"> , а затем добавить стиль CSS

ul.navi > li{ 
    margin-bottom:10px; 
}