CSS ul标签内多个li 标签高度自适应填充

要让 `ul` 中的多个 `li` 标签高度自适应填充，可以通过以下 CSS 代码实现：

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

上述代码中，我们使用了 Flexbox 布局来让 `li` 标签自适应填充。`ul` 元素设置了 `display: flex;` 和 `flex-wrap: wrap;` 属性，使得 `li` 元素可以自动换行。为了去掉 `ul` 标签的默认样式，我们还加了 `list-style: none;`、`padding: 0;` 和 `margin: 0;` 属性。

`li` 元素设置了 `flex: 1;` 属性，使得每个 `li` 标签可以平均分配剩余空间。同时，我们还设置了 `padding: 10px;` 和 `box-sizing: border-box;` 属性，使得 `li` 标签内部的元素可以自适应填充，而不会因为 padding 而超出父元素的大小。

相关问题

css选择ul标签下的第二个li标签

您可以使用以下 CSS 选择器来选择 `ul` 标签下的第二个 `li` 标签：

ul li:nth-of-type(2) {
  /* CSS样式 */
}

这个选择器使用了 `:nth-of-type()` 伪类来选择 `ul` 下的第二个 `li`。这意味着如果有其他类型的元素也位于 `ul` 下，它们不会被选择。

css 高度自适应

以下是几种常见的CSS高度自适应布局方法：

1. 使用百分比高度：可以通过将元素的高度设置为百分比来实现自适应布局。例如，将一个div的高度设置为50%，它将根据其父元素的高度自动调整自己的高度。

2. 使用min-height和max-height属性：可以使用min-height和max-height属性来限制元素的最小和最大高度。这样，元素的高度将根据内容的多少自动调整。

3. 使用flexbox布局：flexbox是一种强大的布局模型，可以实现高度自适应。通过设置flex容器的属性，可以使其子元素自动调整高度以填充可用空间。

4. 使用grid布局：grid布局也是一种强大的布局模型，可以实现高度自适应。通过设置grid容器的属性，可以使其子元素自动调整高度以填充可用空间。

5. 使用CSS表格布局：可以使用display: table和display: table-cell属性来实现类似表格的布局。这种布局方式可以使表格单元格自动调整高度以适应内容。

6. 使用position属性：可以使用position: absolute或position: fixed属性来实现高度自适应。通过设置top和bottom属性，可以使元素的高度自动调整以填充可用空间。

这些是一些常见的CSS高度自适应布局方法，你可以根据具体的需求选择适合的方法来实现高度自适应布局。