css制作纵向列表

使用无序列表（ul）和列表项（li）

通过HTML的无序列表<ul>和列表项<li>结构，结合CSS样式实现纵向排列：

<ul class="vertical-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.vertical-list {
  list-style-type: none; /* 移除默认项目符号 */
  padding: 0;
  margin: 0;
}

.vertical-list li {
  padding: 8px 12px;
  border-bottom: 1px solid #eee; /* 可选分隔线 */
}

使用Flexbox布局

Flexbox可以快速实现纵向排列，尤其适合需要对齐控制的场景：

.vertical-container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 项间距 */
}

.vertical-item {
  padding: 8px;
  background: #f5f5f5;
}

使用Grid布局

CSS Grid提供更灵活的纵向排列方式：

.grid-list {
  display: grid;
  grid-auto-flow: row;
  row-gap: 8px;
}

纯div结构实现

当需要非列表语义时，可通过div块级元素的默认堆叠特性实现：

<div class="v-list">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
</div>

.v-list .item {
  display: block;
  margin-bottom: 12px;
}

添加交互效果

为纵向列表增加悬停效果增强用户体验：

.vertical-list li:hover {
  background-color: #f0f0f0;
  transition: background 0.3s ease;
}

响应式处理

通过媒体查询调整纵向列表在移动端的显示：

@media (max-width: 768px) {
  .vertical-list li {
    padding: 12px 16px;
    font-size: 14px;
  }
}