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

标签 html css responsive-design

我有两个列表,我将它们分成两列。我想在小屏幕上做到这一点,元素变成一列,但我想交替元素。

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

最佳答案

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

关于html - CSS 两列列表 - 响应式合并为一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18433295/

相关文章:

css - 根据屏幕尺寸加载各种视网膜图形

html - 在所有浏览器中使用 column-count 时避免 paragraf 被破坏

javascript - 从像素值推断像素位置

php - 让ajax不断发送数据到php脚本并检索结果?

jquery-ui 调整一个元素的大小会影响其他元素

html行高问题; <br> 与 CSS 行高对比

javascript - getBoundingClientRect 返回错误的结果

javascript - 使用createjs调整zindex

javascript - UI Angular Bootstrap typeahead 隐藏第一个选项

html - CSS百分比宽度和边距问题(使用bootstrap)