等分

1.  等分--float

• 1
• 2
• 3
• 4

    等分--float <br/>
<ul class='floatEqual'>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

    .floatEqual{
        width: 100%;
    }
    .floatEqual:after{
        content:'';
        display: table;
        clear: both;
    }
    .floatEqual li{
        float:left;
        width: 25%;
    }

2. 等分---flex

• 1
• 2
• 3
• 4

等分---flex
<ul class='flexEqual'>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

    .flexEqual{
      display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;    
    }
    .flexEqual li{
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
    }

3.  等分 ---table

• 1
• 2
• 3
• 4

等分 ---table 
<ul class='tableEqual'>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

    .tableEqual{
        display: table;
        width:100%;
    }
    .tableEqual li{
        display: table-cell;
    }