执行此操作的唯一方法(在一些非常费力的定位之外)是将元素组合到一个列表中,为每个li提供一个类名并对其进行适当的样式设置:
- Item A
- Item 1
- Item B
- Item 2
- Item C
- Item 3
- Item D
- Item 4
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%;
}
}