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所述，在下面的评论中，可以使用: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做到这一点。但是，您可以在每个span中添加两个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

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

2 个答案: