css - 嵌套列表之间的空格

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，但这不是 XHTML 1.1 Strict。还有其他解决方案吗？

谢谢!

Answer 1

分配<li>具有类名的元素。

<li class="spacing">

添加一个CSS样式:

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