0

のリスト<div>が表示されている Web サイトがあります。には、 と<div>に基づいた代替の背景色が:nth-child(odd)あり:nth-child(even)ます。それでまったく問題ありません。

私が必要としているのは、最後の div の後でも代替の背景色を作成する方法です。Mac OS Finder Window がどのように機能するかの並べ替え (クライアントのインスピレーションです)。

どうやってするか？不格好な「空のdivを作成する」以外の方法はありますか?

リスト ビューの mac フォルダのイメージ:

ここに画像の説明を入力

4

2 に答える 2

4

最善の策は、背景画像または背景グラデーションを使用して、コンテナー要素で繰り返しパターンを取得することです。

不利な点は、交互の div の高さが異なる場合です。

例 (ビジュアルの jSFiddle ):

#container{
   background-image: -webkit-repeating-linear-gradient( 90deg, 
    lightgray,
    lightgray 10px,
    white 10px,
    white 20px
  );
}

さまざまな単位 (つまり、ピクセルではなく EM) を試してみると、Finder の背景に近いものが得られるはずです。ブラウザの互換性のためにベンダー プレフィックスを使用する必要があることに注意してください。

于 2015-04-15T18:34:32.167 に答える
-1

CSS でこれを行う場合、リスト html がタグでラップされている場合は、クラスの background または background-color プロパティをそのタグに割り当てることができます。( JSFiddle )。

HTML

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

li:nth-child(odd) {
    color: white;
    list-style: none;
    background-color: blue;
    margin-left: -40px;
}
li:nth-child(even) {
    color: white;
    list-style: none;
    background-color: gray;
    margin-left: -40px;
}
.list {
    padding-bottom: 18px;
    background: gray;
}

リストが UL タグでラップされていない場合は、html の構造を再検討する必要があります。

于 2015-04-15T19:26:03.510 に答える