CSS:nth-​​child - 底部的额外间距

时间:2014-11-22 03:13:46

标签: css css-selectors

有问题的网页:http://bit.ly/1xLOmeS

每三个LI在底部有额外的间距,不应该在那里。 我已尝试使用nth-child(odd)和(even),如下所示,并且还尝试了li:nth-​​child(2n + 2)条件,右边距设置为0px以防止每个第二个框被移位到下一行。这个空间来自哪里?

CSS

ul.comment-card {
    padding: 0; 
    margin: 0;
    list-style: none;
}
.comment-card li:nth-child(odd) {
    background: #fff;
    display: inline-block;
    height: 300px;
    list-style: none;
    margin: 0 20px 26px 0;
    padding: 30px;
    width: 327px;
}
.comment-card li:nth-child(even) {
    background: #fff;
    display: inline-block;
    height: 300px;
    list-style: none;
    margin: 0 0 26px 0;
    padding: 30px;
    width: 327px;
}
.comment-card li .meta {
    color: #767da1;
    font-weight: 400;
    line-height: 1.4em;
}
.comment-card .meta img {
    position: relative; 
    top: -8px;
}

1 个答案:

答案 0 :(得分:0)

.comment-card li:nth-child(odd) {
background: #fff;
display: inline-block;    
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 20px 26px 0;
padding: 30px;
width: 327px;
}
.comment-card li:nth-child(even) {
background: #fff;
display: inline-block;
height: 300px;
overflow: hidden;
list-style: none;
margin: 0 0 26px 0;
padding: 30px;
width: 327px;
}

示例:jsFiddle

相关问题