用CSS3实现根据ul中li个数设置不同的宽度

效果：

---

 

代码：

---

<style type="text/css">

    ul li{ width: 100%; float: left; text-align: center; line-height: 1.17333333rem;}

    ul li:first-child:nth-last-child(2),
    ul li:first-child:nth-last-child(2) ~ li {
      width: 50%;
    }
    ul li:first-child:nth-last-child(3),
    ul li:first-child:nth-last-child(3) ~ li {
      width: 33.3%;
    }
    ul li:first-child:nth-last-child(4),
    ul li:first-child:nth-last-child(4) ~ li {
      width: 25%;
    } 
    
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>