css制作竖排导航

使用 writing-mode 属性

设置 writing-mode: vertical-rl; 或 writing-mode: vertical-lr; 将文本垂直排列。vertical-rl 表示从右到左（默认从上到下），vertical-lr 表示从左到右。

.nav {
  writing-mode: vertical-rl;
  height: 100vh;
  background: #333;
  color: white;
  padding: 20px 0;
}
.nav a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}
.nav a:hover {
  background: #555;
}

使用 flex-direction: column

通过 Flexbox 将子元素垂直排列，适合简单的竖排导航。

.nav {
  display: flex;
  flex-direction: column;
  background: #333;
  width: 100px;
}
.nav a {
  padding: 15px;
  color: white;
  text-decoration: none;
  text-align: center;
}
.nav a:hover {
  background: #555;
}

使用 transform: rotate()

通过旋转容器实现竖排效果，需调整布局和位置。

.nav {
  transform: rotate(-90deg);
  transform-origin: left top;
  position: absolute;
  left: 20px;
  top: 100%;
  white-space: nowrap;
  background: #333;
}
.nav a {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

注意事项

• 竖排导航需考虑文字方向（中文、日文等更适合竖排）。
• 使用 writing-mode 时，浏览器兼容性需测试（IE 部分支持）。
• 旋转方式可能影响布局，需配合 position 调整位置。

根据需求选择合适的方法，Flexbox 方案简单易用，writing-mode 更符合竖排文本的自然显示。