CSS两列列表 - 响应合并为一列

Question

我有两个列表,我将其分为两列.我想在小屏幕上做到这一点,项目成为一列,但我想交替项目.

<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设置为50%？我想看看这是否可行,同时保持HTML标记的方式.

http://jsfiddle.net/aAhX9/

Answer 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演示.