我不知道如何命名或如何解释它，所以我会给你一些例子，说明我有什么以及我想创造什么......

我有一个 div 列表，它们都有自己的风格，在某种程度上它们看起来像论坛和子论坛......在这里我将展示我所拥有的图片:

代码很简单:

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
</div>

而且 css 也很简单:

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 0.67);
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    background-color: rgba(12, 50, 69, 0.67);
    border: dotted;
    margin-left: 7em;
}

我在想做一个设计，分类、论坛和子论坛用虚线样式的“列表”链接...我不知道怎么描述，所以我做了一个蓝图:

这个可以买吗？我该怎么做？

谢谢!

最佳答案

仅动态 CSS 解决方案

首先，这涉及标记修改，原因有两个:

<强>1。 HTML 语义

您的内容组织在 herachy，category > forum > sub forum(如菜单)，因此要遵循 HTML semanitcs，您需要使用嵌套列表 ul > li > ul > li 。 ..

<强>2。造型

将标记更改为嵌套元素将允许您使用 :last-child 和 :first-child 伪选择器和样式来定位每个级别的最后一个和第一个元素

DEMO

HTML :

<ul id="Forums">
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div></li>
        </ul>
    </li>
    <li class="category"><div>Category</div>
    </li>
    <li class="category"><div>Category</div>
        <ul>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
            <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
             <li class="forum"><div>Forum</div>
                <ul>
                    <li class="sub-forum">Sub-forum</li>
                    <li class="sub-forum">Sub-forum</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS:

ul, li{
    list-style-type:none;
    margin:0; padding:0;
    position:relative;
}
.category > div{
    width: 95%; height: 3em;
    background-color: rgba(46, 183, 255, 0.67);
}
.forum {
    margin-left: 2em;
}
.forum > div, .sub-forum{
    height: 3em;
    border: dotted;
}
.forum > div{    
    background-color: rgba(30, 101, 141, 0.67);
}
.sub-forum {
    margin-left: 3em;
    background-color: rgba(12, 50, 69, 0.67);
}
.category li:before, .forum:after{
    content:'';
    position:absolute;
    right:100%;
    border-bottom: 0.2em dotted;
}
.category .forum:before{
    top:-1.5em; 
    height:100%; width:1em;
    border-left: 0.2em dotted;
    border-bottom-color: transparent;
}
.forum:last-child:before{
    height:3em;    
}
.forum:first-child:before{
    top:0;
    bottom:1.5em;    
}
.forum:after{
    top:1.5em;
    width:1.2em;
}
.sub-forum:before{
    bottom:50%;
    width:3.5em; height: 100%;
    border-left: 0.2em dotted;
}

关于javascript - 虚线样式的列表链接 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24586595/