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

在项目中遇到ul中的li数量不定，但是还要给ul设置圆角和阴影，而ul默认的宽度是100%,上网查到一个简单的方法就是在ul中加属性

ul{
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
}
li{float:left}

如果对浏览器要求不高，这种方法就可以实现了

 

first-child

first-child表示选择列表中的第一个标签

nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

nth-child(2n) 

这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。

nth-child(2n-1)

这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。

nth-child(-n+3)

这个表示选择列表中的标签从0到3，即小于3的标签

nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

li {
    width: 100%;text-align: center; float: left;
}

li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li{
    width: 50%;
}

li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li {
    width: 33.3%;
}

li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

li:first-child:nth-last-child(5), li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}