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>项目分配（比如说）“toplevel”类，然后在您的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 <ul class="navi"> 然后添加一个CSS样式

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

嵌套列表之间的空格

4 个答案: