Question

任何人都可以帮我解决我的问题。我正在尝试使用css为奇数和偶数列表元素创建单独的样式。偶数代码工作得很完美，但奇怪的代码不能告诉我，如果我做错了什么。

#entries-content.list ul.col-1 li:nth-child(odd) .time { 
    position:absolute;
    width:19px;
    height:21px;
    background-image:url(images/arrow.png);
    background-position:-20px -21px;
    float:right 
}


#entries-content.list ul.col-1 li:nth-child(even) .time { 
    position:absolute;
    margin:20px 0 0 -15px;
    width:19px;
    height:21px;
    background-image:url(images/arrow.png);
    background-position: 0px -21px; 
    float:left;
}

奇数列表项不浮动到右侧，宽度和高度也不起作用。偶数代码工作正常。

Answer 1

position:absolute将从其父元素流中删除您的元素。在这些元素上使用float: value会产生no float applied：

[...]此属性指定框是否应向左，向右或根本不浮动。它可以为任何元素设置，但仅适用于生成未绝对定位的框的元素。 [...]

由于您不使用任何定位值（top，left，right，bottom），我假设您可以删除position:absolute。< / p>

Answer 2

我不知道这是不是问题，但是有一个分号丢失：

background-image:url(images/arrow.png);background-position:-20px -21px;float:right; }

编辑：您可以使用右侧和左侧而不是浮动，因为您使用position: absolute。

注意：您必须在父div处使用position: absolute或relative，否则可能是左侧和右侧没有您希望它具有的效果。

#entries-content.list ul.col-1 li:nth-child(odd) .time { 
    position:absolute;
    width:19px;
    height:21px;
    background-image:url(images/arrow.png);
    background-position:-20px -21px;
    right: 0px;
}


#entries-content.list ul.col-1 li:nth-child(even) .time { 
    position:absolute;
    margin:20px 0 0 -15px;
    width:19px;
    height:21px;
    background-image:url(images/arrow.png);
    background-position: 0px -21px; 
    left: 0px;
}

css列出奇数偶数类

2 个答案: