html – 如何使用CSS在列表项之间创建垂直线？

概述我指的是这些行： http://prntscr.com/d44uuk 我希望它们具有动态高度 – 所以如果我决定改变< li>之间的垂直距离.元素 – 它们将自动调整大小. 这是我的小提琴： https://jsfiddle.net/v6ccgkwo/ ul { list-style: none;}ul li { margin-bottom: 40px;}ul li span 我指的是这些行： http://prntscr.com/d44uuk
我希望它们具有动态高度 – 所以如果我决定改变< li>之间的垂直距离.元素 – 它们将自动调整大小.

这是我的小提琴：
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>

总结

以上是内存溢出为你收集整理的html – 如何使用CSS在列表项之间创建垂直线？全部内容，希望文章能够帮你解决html – 如何使用CSS在列表项之间创建垂直线？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。