响应列表项

Question

在响应模式下，我需要将一个内衬li放置到多行li上。 lis的宽度不同。不能使用％。 lis将从每一行的乞求开始。

我该怎么做？

Answer 1

为此，我建议使用CSS Flexbox：

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

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

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

Answer 2

您可以执行类似的操作，see this fiddle

override fun getListItems(context: Context): List<ConnectionViewModel> {
return connectionsRepository.getAll().map { connection ->
    ConnectionViewModel(
            code = connection.code,
            name = connection.name,
   }
}

Answer 3

这是我为固定响应列表和固定响应列表（ play ，并通过窗口宽度查看它们之间的差异）制作的一个示例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的100％中都有25％，因此您可以连续拥有4个li，但是使用nth-child可以使任何{{ 1}}具有明确的宽度，只需确保它等于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之一的宽度为li，那么对于所有小于450 px的窗口宽度，450 px将会li

专业提示2 ：在使用overflow时，它将默认在元素之间添加空格，您可以通过添加到父元素display: inline-block

来消除该空间。