html – CSS两列列表 – 响应合并到一列

概述我有两个列表,我将其分为两列.我想在小屏幕上做到这一点,项目成为一列,但我想交替项目. <div> <ul class="left"> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> </ul> <ul class="right"> 我有两个列表,我将其分为两列.我想在小屏幕上做到这一点,项目成为一列,但我想交替项目.

<div>    <ul >        <li>Item A</li>        <li>Item B</li>        <li>Item C</li>        <li>Item D</li>    </ul>    <ul >        <li>Item 1</li>        <li>Item 2</li>        <li>Item 3</li>        <li>Item 4</li>    </ul></div>

所以结果应该在小屏幕上看起来像这样.

Item AItem 1Item BItem 2Item CItem 3Item DItem 4

这是我的首发Jsfiddle.我应该制作一个li宽度设置为50％的列表吗？我想看看这是否可行,同时保持HTML标记的方式.

http://jsfiddle.net/aAhX9/

解决方法 执行此 *** 作的唯一方法(在一些非常费力的定位之外)是将元素组合到一个列表中,为每个li提供一个类名并对其进行适当的样式设置：

<div>    <ul>        <li >Item A</li>        <li >Item 1</li>        <li >Item B</li>        <li >Item 2</li>        <li >Item C</li>        <li >Item 3</li>        <li >Item D</li>        <li >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两列列表 – 响应合并到一列全部内容，希望文章能够帮你解决html – CSS两列列表 – 响应合并到一列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。