ASP.NET(或HIML)实现类似串珠的CSS如图,有看到使用Ui及li做(没搞懂)

Question

就是那根竖线串起图片

Answer 1

只要把绝对定位的图片压到边框线上即可实现：

<style>
ul {display:flex; flex-direction:column; align-items:flex-start; width:100%}
ul li {position:relative; width:50%; height:200px; margin:0; box-sizing: border-box; list-style-type:none; padding:30px}
ul li img {position:absolute; top:-25px; width:50px; height:50px; border-radius:50%; overflow:hidden}
ul li:nth-child(odd) {border-right:1px solid #000; text-align:right}
ul li:nth-child(odd) img {right:-25px}
ul li:nth-child(even) {border-left:1px solid #000; text-align:left; align-self:flex-end}
ul li:nth-child(even) img {left:-25px}
</style>
<ul>
   <li>1111111111</li>
   <li>2222222222<img src="图片1"/></li>
   <li>3333333333<img src="图片2"/></li>
   <li>4444444444<img src="图片3"/></li>
</ul>

Answer 2

这跟 asp.net 一点关系都没有。 这就是 css html