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

问题描述

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

<ul class="left"><li>项目A</li><li>项目B</li><li>项目C</li><li>项目D</li><ul class="right"><li>项目 1</li><li>项目 2</li><li>项目 3</li><li>项目 4</li>

所以结果在小屏幕上应该是这样的.

项目 A第 1 项B项第 2 项项目 C第 3 项项目 D第 4 项

这是我的起始 jsfiddle.我是否应该将 li width 设置为 50% 来制作一个列表?我想看看这是否可行，同时保持 HTML 标记的原样.

http://jsfiddle.net/aAhX9/

解决方案

做到这一点的唯一方法(除了一些非常费力的定位)是将元素组合成一个列表，给每个 li 一个类名并对其进行适当的样式设置:

<ul><li class="left">项目 A</li><li class="right">项目 1</li><li class="left">项目B</li><li class="right">项目 2</li><li class="left">项目 C</li><li class="right">项目 3</li><li class="left">项目 D</li><li class="right">项目 4</li>
李{列表样式类型:无；宽度:50%；}li.left {向左飘浮;背景色:#0f0；}li.right {浮动:对；背景色:#00f；}@media only screen and (max-width: 480px) {.左右 {浮动:无；宽度:100%；}}

更新了 JS Fiddle 演示.

正如哈希姆所指出的，在下面的评论中，可以使用 :nth-child() 选择器而不是类名来设置各种 li 元素向左或向右:

li:nth-child(odd) {向左飘浮;背景色:#0f0；}li:第n个孩子(偶数){浮动:对；背景色:#00f；}@media only screen and (max-width: 480px) {李{浮动:无；宽度:100%；}}

更新了 JS Fiddle 演示.

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

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/

解决方案

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

Updated JS Fiddle demo.

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

Updated JS Fiddle demo.

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