如何使用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>

來源

2016-11-07 yaru

這也將工作使用動態內容並且沒有使用額外的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>

來源

2016-11-07 11:26:41

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; 
}

來源

2016-11-07 11:25:11

你能添加一個類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

來源

2016-11-07 11:25:13 Mikl

如何使用CSS在列表項之間製作垂直線？

回答

相關問題