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

Updated JS Fiddle demo.

正如 Hashem 所指出的，在下面的 cmets 中，可以使用 :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%;
    }
}

Updated JS Fiddle demo.

Answer 2

你不能用两个ul 做到这一点。但是，您可以在每个li 中放置两个span。

例子：

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