项目中有一个需求,二级导航栏子项目数量不定,但都是均分排列。这时候怎么处理呢?
很容易处理js计算,长度除以个数。js动态计算出来。这样有一个问题,当DOM加载完毕后再js修改样式属性,回发现导航闪一下。
所以css处理是很好的办法。
display:flex是一个不错的办法。然而flex在ie9不支持。无法做到优雅的降级。
在阅读了大漠的文章后发现first-child nth-last-child似乎是一个不错的办法。first-child在ie8能够运用。
/* one item */
a:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
a:first-child:nth-last-child(2),
a:first-child:nth-last-child(2) ~ a {
width: 50%;
}
/* three items */
a:first-child:nth-last-child(3),
a:first-child:nth-last-child(3) ~ a {
width: 33%;
}
/* four items */
a:first-child:nth-last-child(4),
a:first-child:nth-last-child(4) ~ a {
width: 25%;
}
a:first-child:nth-last-child(5),a:first-child:nth-last-child(5) ~ a {
width:20%;
}