响应式 2 列到单列列表

Question

是否可以有一个无序列表，默认情况下显示为两列，但通过如下所示的 media query 相应地变回单列？

@media (max-width: 640px)

列表中的项目数未知，我想避免使用多个列表（例如以编程方式插入标签）

Answer 1

是的，这是可能的。

在媒体查询中默认将 li 的 width 设置为 50% 和 float:left（min-width - 移动优先方法）

@media (min-width: 640px) {
  li {
    width: 50%;
    float: left
  }
}

<ul>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
</ul>

更新 - 你可以使用 flexbox 来实现这个

@media (min-width: 640px) {
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 50%
  }
}

<ul>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
</ul>

Answer 2

如果列表的长度是动态的，假设您可以通过 PHP 之类的东西控制 HTML 代是否安全？

如果是这样，并且如果您实际上想要拆分一列而不是将列表 a/b c/d 等分到两列，您可以通过编程方式插入

</ul>
<ul>

当您到达列表中点时。定义 UL 以正常显示为内联块元素，并在您的媒体查询中为小屏幕定义块元素。您可能必须在 UL 上设置 padding/margin 以使块之间的 space 消失，以便列表在单列布局中看起来是连续的。

Answer 3

如果逐行绘制符合您的需要，您可以尝试使用 flex： http://codepen.io/anon/pen/Myrwam 或整页播放下面的片段，然后将 window 的宽度减小到 639px。

min-width 在这里设置 2 个元素不能站在 1 行上的点。 320px 设置断点在 640px 下面，只能有一个，它会随着 flex 属性（grow:1）展开全宽。

ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

li {
  display: block;
  min-width: 320px;
  width:50%;
  box-shadow: 0 0 0 2px;
  flex: 1 0 auto;
  background:tomato;
  color:white;
  font-size:1.5em;
  text-align:center;
}
li:nth-child(even) {
  background:#1975B5;
}

li {
  counter-increment: linbr;
}

li:before {
  content: counter(linbr);
}

<ul>
   <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ul>

Answer 4

与@dippas 示例类似，只是少了一点 CSS 因为默认情况下 li 元素是块样式，因此无需设置宽度：100%；和浮动：none；

只是使代码更整洁（IMO），如果是大型站点，CSS 文件的整体重量更轻。

@media (min-width: 640px) {
  li {
    float: left;
    width: 50%;
  }
}

<ul>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
  <li>Foo</li>
</ul>

响应式 2 列到单列列表

Responsive 2-column to Single Column List

html

css

media-queries

更新 - 你可以使用 flexbox 来实现这个