如何使用CSS在列表项之间制作垂直线？

问题描述：

我指的是这些行：http://prntscr.com/d44uuk 我希望它们具有动态高度 - 因此，如果我决定更改<li>元素之间的垂直距离，它们将自动调整大小。如何使用CSS在列表项之间制作垂直线？

这里是我的小提琴： https://jsfiddle.net/v6ccgkwo/

ul { 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    margin-bottom: 40px; 
 
} 
 

 
ul li span { 
 
    border-radius: 50%; 
 
    border: 1px dashed black; 
 
    padding: 5px 10px; 
 
    margin-right: 10px; 
 
}

<ul> 
 
    <li><span>1</span>Легко устанавливается на сайт</li> 
 
    <li><span>2</span>Следит за поведением посетителей</li> 
 
    <li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li> 
 
    <li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li> 
 
</ul>

答

这也将工作使用动态内容并且没有使用额外的DOM。举一个尝试

ul { 
 
    list-style: none; 
 
} 
 

 
ul li { 
 
    padding-bottom: 40px; 
 
    position:relative 
 
} 
 

 
ul li span { 
 
    border-radius: 50%; 
 
    border: 1px dashed black; 
 
    padding: 5px 10px; 
 
    margin-right: 10px; 
 
    background:#fff 
 
} 
 
ul li span:before{ 
 
    content:''; 
 
    position:absolute; 
 
    border-left:1px solid ; 
 
    left:14px; 
 
    bottom:0; 
 
    z-index:-1; 
 
    height:100% 
 
} 
 

 
ul li:last-child span:before{ 
 
content:none; 
 
} 
 
ul li:last-child{ 
 
    padding-bottom:0 
 
}

<ul> 
 
<li><span>1</span>Легко устанавливается на сайт</li> 
 
<li><span>2</span>Следит за поведением посетителей</li> 
 
<li><span>3</span>Замечает, когда они тянут курсор к крестику, намереваясь уйти</li> 
 
<li><span>4</span>И показывает всплывающее окно с заманчивым предложением</li> 
 
    </ul>

答

CSS唯一的解决方法。

ul { 
    list-style: none; 
    float: left; 
    width: 100%; 
    padding: 0; 
} 

ul li { 
    padding-bottom: 40px; 
    float: left; 
    width: 100%; 
    position: relative; 
} 

ul li span { 
    border-radius: 50%; 
    border: 1px dashed black; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    margin-right: 10px; 
    background-color: #fff; 
    display: inline-block; 
    position: relative; 
    text-align: center; 
} 

ul li:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    left: 15px; 
    background: #000; 
    z-index: -1; 
} 

ul li:last-child:before { 
    display: none; 
}

你能添加一个类UL和更改CSS来定位特定的类，除非这些样式将覆盖所有UI元素。 –

答

我想你可以写这样的事情：

HTML：

<ul> 
<li> 
    <span>1</span> 
    <span class="text">Легко устанавливается на сайт</span> 
    <div class="verticalLine"></div> 
</li> 
<li> 
    <span>2</span> 
    <span class="text">Следит за поведением посетителей Следит за поведением посетителей</span> 
    <div class="verticalLine"></div> 
</li> 
<li> 
    <span>3</span> 
    <span class="text">Замечает, когда они тянут курсор к крестику, намереваясь уйти</span> 
    <div class="verticalLine"></div> 
</li> 
<li> 
    <span>4</span> 
    <span class="text">И показывает всплывающее окно с заманчивым предложением</span> 
</li> 
</ul>

CSS：

ul { 
    list-style: none; 
} 

ul li { 
    padding-bottom: 11px; 
    margin-bottom:29px; 
    position:relative; 
} 

ul li span:first-child { 
    border-radius: 50%; 
    border: 1px dashed black; 
    padding: 5px 10px; 
    margin-right: 10px; 
} 
ul li span.text { 
    padding-left: 20px; 
} 
.verticalLine{ 
    position:absolute; 
    height:100%; 
    width:1px; 
    border-left:1px solid black; 
    left:15px; 
    top:23px; 
}

而且在jsFiddle

如何使用CSS在列表项之间制作垂直线？

相关推荐