这个等分布局怎么实现

Question

求教！！！
css小白 需要具体的code

---------- 华丽的分隔线
感谢所有回答过flex和兼容性问题的大佬！~

Answer 1

ul {display: flex;justify-content: space-between;}

关于兼容，传送门。

Answer 2

要兼容的话用text-align: justify;吧，ie7ok

        .justify{
                text-align: justify;
                text-justify: inter-ideograph;
            }
            .justify i{
               width:24px;
                line-height:24px;        
                height: 24px;
                display:inline-block;                                             
                background:#333;
                text-align:center;
                color:white;
                border-radius:50%;
                overflow: hidden;
                font-style: normal;
            }
            .justify:after{
                content: '';
                width: 100%;
                position: relative;
                display: inline-block;                
            }
            .justify b{
                display: inline-block;
                position:relative;
                height:0px;                
                width:100%;                        
            }

    <div class="justify">
            <i>1</i>
            <i>2</i>
            <i>3</i>
            <i>4</i>
            <i>5</i>         
            <!--[if lte IE 7]>
            <b></b>
            <![endif]-->
        </div>

Answer 3

flex布局

Answer 4

分别给这四个加上一个class="col-md-3"

Answer 5

使用table实现布局，demo: 链接描述

最后一项，可以不用after伪元素，换成html元素；

Answer 6

父集

{  
   display: flex;
   display: -webkit-flex; /* Safari */
   justify-content: space-between;
}

Answer 7

看了一下目前的答案，心中想到，大家都是好人。告诉了题主使用 flex 布局方式来处理。

所以，我要做坏人，请问，你这个要兼容什么浏览器啊？

Answer 8

要兼容性好的话，用margin呗，小圆的左右间距设置为定值，然后用其父类的子类选择器，干掉第一个的左间距，最后一个点右间距

Answer 9

flex 百分比 grid 都可以