在项目中遇到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%;
}