盒子内的li元素竖直排列

如果你想要在一个无序列表（ul）内，让每个列表项（li）元素竖直排列，通常情况下，你需要创建一个包含所有li元素的块级容器，并将其CSS样式设置为适合垂直排列的内容。这里是一个简单的例子，使用CSS的`display: flex`或`grid`来实现：

**使用Flexbox：**

ul {
  display: flex;
  flex-direction: column; /* 将默认的水平方向改为垂直 */
  list-style-type: none; /* 隐藏项目符号 */
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1; /* 自动填充剩余空间 */
  min-height: 48px; /* 设置最小高度，可根据实际需求调整 */
  background-color: #f1f1f1; /* 仅做示例，可以根据需要添加背景 */
}

**使用CSS Grid：**

ul {
  display: grid;
  grid-template-columns: auto; /* 使用自动布局，每一行填满 */
  gap: 1em; /* 列间距 */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #f1f1f1;
}

在这两个示例中，`li`元素都会按照垂直顺序排列。