首页 > itarticle > step进度条可以用css两端对齐

step进度条可以用css两端对齐

admin 11月 11, 2020 0

step进度条

实现的方法很简单可以用自己熟悉的text-align:justify;

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .step{
            width:300px;
            height:30px;
            margin:20px auto 0;
            text-align: justify;
        }
        .step i{
            width:20px;
            height:20px;
            background: red;
            color:
            text-align: center;
            display: inline-block;
        }
        .step:after{content:"";}
        .step:after,
        .step b{
            display: inline-block;
            position: relative;
            top:-25px;
            *top:-9px;
            width:100%;
            height:1px;
            overflow: hidden;
            font-size:0;
            line-height:0;
            background-color: #ccc;
            z-index: -1;
            *zoom:1;
        }
    </style>
</head>
<body>


<div class="step">
    <i>1</i>
    <i>2</i>
    <i>3</i>
    <i>4</i>
    <i>5</i>
</div>


</body>
</html>