如何让div里的li垂直排列

为了让`<div>`里的`<li>`元素垂直排列，通常需要设置一些CSS样式。你可以采用以下几种方法：

1. **Flexbox布局**:
如果你希望使用现代浏览器支持的 Flexbox，可以给包含`<li>`的`<div>`添加 `display: flex;` 属性，并指定方向（默认水平）：

   .container {
     display: flex;
     flex-direction: column; /* 将列表项竖直排列 */
   }

2. **Grid布局**:
如果你的项目允许使用 CSS Grid，这将提供更强大的二维布局控制：

   .container {
     display: grid;
     grid-template-columns: auto; /* 默认自动分配列宽 */
   }

3. **浮动或定位**:
对于较老版本的浏览器，可以尝试使用 `float` 或者 `position` 属性，但这种方法可能不太推荐了，因为 Flexbox 和 Grid 更加灵活：

   .container {
     overflow: auto; /* 防止父元素滚动 */
   }
   li {
     float: left; /* 或者 position: relative/absolute; 清除浮动 */
   }

4. **CSS Grid 进阶**:
如果有多个行需要对齐，还可以利用 `grid-template-rows` 和 `grid-auto-rows` 设置行高。

记得每个`<li>`元素也需要相应的内联样式来适应容器的布局，例如清除浮动或保持高度等。如果你想要兼容所有浏览器，可能需要使用前缀（如 `-webkit-`、`-moz-` 等），但现代项目推荐直接使用 Autoprefixer 来处理这些前缀。