如何使用CSS定位列表中的最后一行？

Question

我在他/她的个人资料中列出用户的朋友作为图片(如facebook),并且对于指定的宽度,我只能列出9图片的'margin-right:5px,margin-bottom:5px'.对于每个第9个元素,我需要删除margin-right,我用以下方法执行:

:nth-child(9n){
    margin-right: 0;
}

因此该行适合指定的宽度.问题是我还需要使它适合身高.所以,为了删除边距底部,我尝试了这个.但这不起作用:

:nth-last-of-type(-n+9){
    margin-bottom: 0;
}

因为在朋友列表中用户可能没有列表中的9 18 27用户.如果用户有13个朋友,上面的这个css将删除最后9个,但我不希望它触及上面的行.只有最后一排.所以,有多少朋友用户拥有,我必须删除最后一行的边距底部.

我希望我能解释清楚.谢谢.

Answer 1

你可以这样做 - 使用:nth-child()和一般兄弟~选择器的组合.

http://jsfiddle.net/twu14gu0/

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 90px;
    height: 90px;
    font-size: 0;
}
li {
    display: inline-block;
    height: 10px;
    width: 10px;
    font-size: 16px;
}
li:nth-child(9n) {
    color: red;
}
li:nth-child(9n+1):nth-last-child(-n+9),
li:nth-child(9n+1):nth-last-child(-n+9) ~ li {
    color: blue;
}

<ul><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li><li>*</li></ul>