CSS两列列表 - 响应合并到一列 [英] CSS Two Columns of Lists - responsive merge into one column

问题描述

我有两个列表，我漂浮到两列。

I have two lists that I'm floating into two columns. I want to make it so on small screens, the items become one column, BUT I'd like to alternate the items.

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

因此，结果在小屏幕上应如下所示。

So the result should look like this on small screens.

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

这是我的起始jsfiddle。我应该替换一个列表 li width 设置为 50％？我想看看这是否可能，同时保持HTML标记的方式。

Here is my starting jsfiddle. Should I instead make one list with li width set to 50%? I wanted to see if this was possible while keeping the HTML markup the way it is.

http://jsfiddle.net/aAhX9/

推荐答案

这样做的唯一方法费力的定位）是将元素组合成单个列表，给每个 li 一个类名，并适当地对它们进行样式：

The only way to do this (outside of some very laborious positioning) is to combine the elements into a single list, giving each li a class-name and styling them appropriately:

<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 元素， right：

As noted by Hashem, in the comments below, it would be possible to use the :nth-child() selector, rather than class-names, to style the various li elements left, or right:

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演示。

这篇关于CSS两列列表 - 响应合并到一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！