我需要创建这个图像：
它包含附有线条的圆圈.我画了红色框以显示它们是div,因为当它在移动设备上显示时它应该如下所示：
我已经尝试过做what this post says,但它对我不起作用,因为李的woudl不在同一个div中.
这是我的代码：
.steps {
max-width: 1170px;
margin: auto;
overflow: auto;
}
.step-1,.step-2,.step-3,.step-4 {
width: 25%;
float: left;
}<div class="steps"> <div class="step-1"><div class="step-image"> <img src="step1.jpg">
如何使用连接它们的线创建圆圈？
最佳答案
以下解决方案适用于带线的版本.
删除行放置内容：无;在媒体查询下.
section {
display: inline-block;
width: 25%;
text-align: center;
}
div {
margin: .5em;
border: 1px solid red;
padding: .5em;
position: relative;
}
a {
display: inline-block;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
border: 1px solid;
border-radius: 50%;
background: silver;
}
a:before,a:after {
content: "";
position: absolute;
border-top: 1px solid;
margin-top: 1em;
z-index: -1;
}
a:before {
margin-left: -1px;
left: -.5em;
right: 50%;
}
a:after {
margin-right: -1px;
left: 50%;
right: -.5em;
}
section:first-child a:before,section:last-child a:after {
content: none;
}<main> <section><div> <p>Some content
