5

私は2つの列に浮かんでいる2つのリストを持っています。小さい画面では項目が1列になるようにしたいのですが、項目を交互にしたいです。

<div>
    <ul class="left">
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
    </ul>
    <ul class="right">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

したがって、結果は小さな画面では次のようになります。

Item A
Item 1
Item B
Item 2
Item C
Item 3
Item D
Item 4

これが私の最初のjsfiddleです。li width代わりに、 set toを使用して 1 つのリストを作成する必要があり50%ますか? HTMLマークアップをそのままにして、これが可能かどうかを確認したかったのです。

http://jsfiddle.net/aAhX9/

4

2 に答える 2

11

これを行う唯一の方法 (非常に骨の折れるポジショニングを除く) は、要素を 1 つのリストに結合し、それぞれliにクラス名を付けて適切にスタイルを設定することです。

<div>
    <ul>
        <li class="left">Item A</li>
        <li class="right">Item 1</li>
        <li class="left">Item B</li>
        <li class="right">Item 2</li>
        <li class="left">Item C</li>
        <li class="right">Item 3</li>
        <li class="left">Item D</li>
        <li class="right">Item 4</li>
    </ul>
</div>

li {
    list-style-type: none;
    width: 50%;
}

li.left {
    float: left;
    background-color: #0f0;
}

li.right {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
    }
}

JS Fiddle デモを更新しました。

Hashem が指摘したように、以下のコメントで、:nth-child()クラス名ではなくセレクターを使用して、さまざまなli要素を左また​​は右にスタイル設定できます。

li:nth-child(odd) {
    float: left;
    background-color: #0f0;
}

li:nth-child(even) {
    float: right;
    background-color: #00f;
}

@media only screen and (max-width: 480px) {
    li {
        float: none;
        width: 100%;
    }
}

JS Fiddle デモを更新しました。

于 2013-08-25T20:26:12.450 に答える
1

2 でそれを行うことはできませんul。spanただし、各に 2 つずつ入れることができますli。

例：

HTML:

<div>
    <ul>
        <li><span class="left">Item A</span><span class="right">Item 1</span></li>
        <li><span class="left">Item B</span><span class="right">Item 2</span></li>
        <li><span class="left">Item C</span><span class="right">Item 3</span></li>
        <li><span class="left">Item D</span><span class="right">Item 4</span></li>
    </ul>
</div>

CSS:

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

span{
    width: 50%;
}


.left {
    float: left;
    background:blue;
}


.right {
    float: right;
    background:Red;
}


@media only screen and (max-width: 480px) {
    .left, .right {
        float: none;
        width: 100%;
        display:blocK;
    }
}

JSFiddle

于 2013-08-25T20:27:46.230 に答える