如何将无序列表转换为垂直排列的布局？

将无序列表（通常是`<ul>`元素）转换为垂直排列的布局，可以采用CSS和HTML结合的方式来实现。一种常见的做法是利用Flexbox或者Grid布局。以下是步骤：

1. 使用HTML结构：

   <div class="vertical-list">
     <ul>
       <li>项目1</li>
       <li>项目2</li>
       <li>项目3</li>
       <!-- 更多列表项 -->
     </ul>
   </div>

2. 使用CSS（Flexbox示例）：

   .vertical-list {
     display: flex;
     flex-direction: column; /* 将列方向设置为垂直 */
     justify-content: space-between; /* 保证每个列表项之间的间距均匀 */
   }
   
   ul li {
     margin-bottom: 10px; /* 可以调整这里以控制间距 */
   }

3. 如果你想用Grid布局，可以这样做：

   .vertical-list {
     display: grid;
     grid-template-columns: 1fr; /* 单一列，自适应宽度 */
     gap: 10px; /* 列之间间距 */
   }