-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これらの要素を使用すると、float が適用されなくなります。

[...] このプロパティは、ボックスが左、右、またはまったくフロートしないかどうかを指定します。任意の要素に設定できますが、絶対配置されていないボックスを生成する要素にのみ適用されます。[...]

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; }

編集: を使用しているため、float の代わりに right と left を使用できますposition: absolute。

注:親 div でposition: absoluteorを使用する必要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;
}
于 2012-07-11T17:50:16.957 に答える