.parent {
position: relative;
}
.parent .parent-header:after {
content: '';
position: absolute;
width: 1px;
height: 30px;
left: 15px;
top: 36px;
border-left: 1px dotted black;
}
.child {
padding-left: 30px;
position: relative;
}
.child .child-header:before {
content: '';
position: absolute;
width: 1px;
height: 100%;
left: 15px;
top: 0px;
border-left: 1px dotted black;
}
.child:last-child .child-header:before {
content: none;
}
.child .child-header:after {
content: '';
height: 1px;
width: 15px;
position: absolute;
left: 15px;
top: 15px;
border-top: 1px dotted black;
}
<div class="parent">
<h2 class="parent-header">Heading</h2>
<div class="child">
<h2 class="child-header">Block 1</h2>
<div>some text some text some text some text some text some text some text some text some text some text some text some tex</div>
</div>
<div class="child">
<h2 class="child-header">Block 2</h2>
<div>some text some text some text some text some text some text some text some text some text some text some text some tex</div>
</div>
<div class="child">
<h2 class="child-header">Block 3</h2>
<div>some text some text some text some text some text some text some text some text some text some text some text some tex</div>
</div>
</div>
http://plnkr.co/edit/LmA1wsn8pLPwQCtPnqtM?p=preview
请查看 plnkr。我试图填补垂直线之间的差距。有人能帮我吗。我愿意接受比我为实现该样式所做的更好的方法
最佳答案
http://plnkr.co/edit/H7LTMEBRlOpm89nCMCl6?p=preview
这是你需要的东西。
.parent .parent-header:after {
top: 35px;
}
.child-header {
margin-top:0;
padding-top:25px;
}
.child:last-child .child-header:before {
height: 35px;
}
基本上造成这种差距的是 h2.child-header 的边距。因此,您需要将其更改为填充,然后只需修改 .child-header:after top 值即可。
希望我能帮到你。
关于html - 类别/子类别列表的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43748902/