css：数字，横线的精确计算

中间的连线左右固定10px,根据屏幕自适应

image.png

思路：使用flex布局，横线通过定位的方式（自动计算width）
html代码如下：

   

                    

                        

                            
1
                            
Sign Up for Free
                            
Submit your free register application today. No terms or charge required.
                        
                    

                    

                        

                            
2
                            
Activate Your Account
                            
After approved, we will email you to invite you to activate your member account.
                        
                    

                    

                        

                            
3
                            
Shop and Save
                            
Log in to unlock member only bulk price. Our professional sourcing team will help you in every ordering step.
                        
                    

                

css代码如下:

.txt-item-wrap {
        display: flex; `父元素flex`
        .txt-item {
            width: 33.33%; `//控制width`
        }
        .item-inner {
            position: relative;
        }
        .num {
            width: 45px;
            height: 45px;
            line-height: 45px;
            border-radius: 50%;
            color: rgb(34, 34, 34);
            border: 1px solid rgb(34, 34, 34);
            text-align: center;
            margin: 30px auto;
            font-size: 18px;
        }
        .num1::after, .num2::after {
            content: '';
            position: absolute;
            height: 1px;
            border-top: 1px dashed #222;
            width: calc(100% - 67px); `//67=33.5*2，左右两边`
            top: 22.5px; `//num是45px*45px，所以上移22.5px`
            margin-left: 33.5px; `//间距10px+半径22.5px + 1px border`
            left: 50%; `//相对于父元素，left50%,通过margin-left设置间距`
        }
        .txt {
            max-width: 370px;
            margin-top: 10px;
            overflow: hidden;
            text-align: center;
            margin: 0 auto;
            color: #555;
            font-size: 14px;
        }

    }