-1

谁能帮我解决我的问题。我正在尝试使用 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;
}

奇数列表项不会浮动到右侧，宽度和高度也不起作用。偶数代码运行良好。

4

2 回答 2

3

position:absolute将从其父元素流中删除您的元素。在这些元素上使用float: value将导致不应用浮点数：

[...] 这个属性指定了一个盒子是应该向左浮动、向右浮动还是根本不浮动。可以为任何元素设置它，但仅适用于生成非绝对定位框的元素。[...]

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

于 2012-07-11T17:52:14.337 回答
0

我不知道这是否是问题所在，但缺少分号：

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

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

注意：你必须在父div上使用position: absoluteor relative，否则可能是left和right没有你想要的效果。

#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;
}
于 2012-07-11T17:50:16.957 回答