我有两个列表,我将它们分成两列。我想在小屏幕上做到这一点,元素变成一列,但我想交替元素。
<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 标记的原样。
最佳答案
做到这一点的唯一方法(除了一些非常费力的定位之外)是将元素组合到一个列表中,给每个 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%;
}
}
正如 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%;
}
}
关于html - CSS 两列列表 - 响应式合并为一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18433295/