5

我有两个列表，我浮动到两列中。我想在小屏幕上做到这一点，项目变成一列，但我想交替项目。

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

4

2 回答 2

11

做到这一点的唯一方法（除了一些非常费力的定位之外）是将元素组合成一个列表，给每个元素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

你不能用两个来做到这一点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

于 2013-08-25T20:27:46.230 回答