css制作竖排导航

使用 writing-mode 属性

通过 writing-mode: vertical-rl 或 writing-mode: vertical-lr 实现文本竖排效果。vertical-rl 表示从右到左竖排，vertical-lr 表示从左到右竖排。

.vertical-nav {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 200px;
  background: #f0f0f0;
  padding: 10px;
}

使用 transform 旋转

通过 transform: rotate(90deg) 将水平导航旋转为竖排。需调整 transform-origin 和容器尺寸。

.vertical-nav {
  transform: rotate(90deg);
  transform-origin: left top;
  width: 200px;
  margin-top: 200px;
  background: #f0f0f0;
}

使用 Flexbox 纵向布局

Flexbox 的 flex-direction: column 可直接实现纵向排列，适合简单的竖排导航。

.vertical-nav {
  display: flex;
  flex-direction: column;
  width: 100px;
  background: #f0f0f0;
}
.vertical-nav a {
  padding: 10px;
  text-align: center;
}

使用 Grid 布局

CSS Grid 也可实现竖排导航，通过 grid-template-rows 定义行高。

.vertical-nav {
  display: grid;
  grid-template-rows: repeat(auto-fit, 40px);
  width: 100px;
  background: #f0f0f0;
}
.vertical-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
}

竖排文字与图标结合

若导航包含图标，需调整图标和文字的排列方式。

.vertical-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.vertical-nav i {
  margin-bottom: 5px;
}

响应式竖排导航

通过媒体查询在小屏幕下切换为横排。

.vertical-nav {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .vertical-nav {
    flex-direction: row;
  }
}