Question

是否可以使用单个无序列表，默认情况下显示为两列，但通过下面显示的media query响应地更改回单个列？

@media (max-width: 640px)

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

Answer 1

是的，这是可能的。

默认设置为width li至50%和float:left

float

在媒体查询中，重置width并将li 100%设置为li { width: 50%; float: left } @media (max-width: 640px) { li { width: 100%; float: none; } }

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

{{1}}

Answer 2

你可以尝试使用flex，如果逐行绘制就可以满足你的需求了： list comprehension 或者在整页下面播放片段，然后将窗口宽度缩小到639像素。

min-width设置2个元素不能站在1行的点。 320px设置断点为640px，低于，只有一个可以存在，它将使用flex属性扩展全宽（增长：1）。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

Answer 3

如果列表的长度是动态的，假设您可以通过PHP控制HTML生成是否安全？

如果是这样，并且如果您实际上想要打破列而不是在两列上传播列表a / b c / d等，则可以以编程方式插入

</ul>
<ul>

当你到达列表中点时。定义UL以正常显示为内联块元素，并在媒体查询中阻止小屏幕中的元素。您可能必须在UL上设置填充/边距以使块之间的空间消失，因此列表在单个列布局中看起来是连续的。

Answer 4

与@dippas类似，只是少了一点CSS，默认情况下li元素是块样式，所以不需要设置宽度：100％;和float：none;

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

＆＃13;

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

＆＃13;

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

＆＃13;

响应式2列到单列列表

4 个答案: