嵌套列表之间的空格

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和Groot onderhoud之间，等等。我尝试使用br，但这不是XHTML1.1严格的。还有其他的解决方案吗？

谢谢!

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;
}