响应式列表项

Question

在响应式模式下，我需要将一些单行li 放置到多行li。 lis 的宽度不一样。不可能使用 % 。 lis 将从每一行开始。

我该怎么做？

Answer 1

ul li {
  display: inline-block;
  padding: 20px;
  border: 1px solid #000;
  border-radius: 20px;
  list-style: none;
  margin: 0 20px 20px 0;
}

Answer 2

我会为此推荐 CSS Flexbox：

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

您会看到随着屏幕尺寸的缩小，li 元素会换行到下一行。

示例：https://jsfiddle.net/rmfx4qdw/

Answer 3

这是我为流动和固定响应列表制作的示例（播放宽度 window 以查看它们之间的区别）https://jsfiddle.net/ahentea/0542ynvh/

对于流体列表：

ul {
  display: block;
  width: 100%;
  clear: both;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul li {
  list-style: none;
  width: 25%;
  display: inline-block;
}

在上面的例子中每个 li 有 25% 的 100% 因此你可以连续有 4 li，但是使用第 nth-child 你可以使任何li 有一个明确的宽度只要确保它等于 100% 上面的所有东西都会落在下面。

对于具有固定宽度元素的列表：

ul {
  display: block;
  width: 100%;
  clear: both;
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul li {
  list-style: none;
  display: inline-block;
}
ul li:nth-child(1) {
  width: 300px;
}

ul li:nth-child(2) {
  width: 225px;
}

ul li:nth-child(3) {
  width: 130px;
}

ul li:nth-child(4) {
  width: 80px;
}

在这种情况下，当容器的宽度无法容纳每个 li 的宽度时，它们将从最后一个到第一个倒在下面。

专业提示，如果您决定实施此方法，请确保 li 的 none 超过最小值 window 否则它们会溢出。例如，如果您的 li 之一的宽度为 450 px，那么对于所有小于 450 px 的 window 宽度，li 将 overflow

专业提示 2 使用 display: inline-block 时，默认情况下会在元素之间添加白色 space，您可以通过以下方式摆脱 space添加到父元素 font-size: 0

响应式列表项

Responsive list item

html

css

responsive