如何实现垂直导航栏？现有方案遇溢出及位置偏移问题求助

我懂你想要实现垂直排列的导航栏，但用writing-mode时页面溢出、用rotate后导航偏移的坑确实头疼！下面给你几个实用的解决方案，帮你完美达成目标：

方案1：正确使用writing-mode（无溢出） #

writing-mode导致溢出通常是因为容器没有设置合适的尺寸，或者没有调整元素的内外边距。试试这样写CSS：

.header-social {
  /* 给容器设置固定宽度，适配垂直文字的高度 */
  width: 40px;
  /* 可选：固定高度，避免内容撑开容器导致布局混乱 */
  height: 200px;
  /* 可选：添加边框方便调试 */
  border: 1px solid #eee;
}

.header-nav-secondary ul {
  /* 垂直排列文字，从右到左（也可以用vertical-lr） */
  writing-mode: vertical-rl;
  /* 重置列表默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
  /* 让文字居中对齐 */
  text-align: center;
  /* 占满容器高度 */
  height: 100%;
  /* 用flex均匀分布列表项（可选） */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.header-nav-secondary ul li a {
  /* 去掉下划线 */
  text-decoration: none;
  color: #333;
}

这个方案直接让文字垂直排列，不需要旋转，布局更稳定，也不会出现溢出问题。

方案2：修正transform: rotate的偏移问题 #

如果更倾向用旋转的方式，偏移是因为默认的transform-origin是元素中心，旋转后位置会偏移。可以通过调整原点或配合translate来修正：

.header-social {
  /* 给容器设置固定高度，适配旋转后的导航宽度 */
  height: 200px;
  position: relative;
  /* 可选：边框调试 */
  border: 1px solid #eee;
}

.header-nav-secondary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 先旋转，再向下平移修正偏移 */
  transform: rotate(-90deg) translateY(-100%);
  /* 把旋转原点设为左上角 */
  transform-origin: top left;
  /* 绝对定位让它贴在容器左侧 */
  position: absolute;
  top: 0;
  left: 0;
}

.header-nav-secondary ul li {
  /* 水平排列列表项（旋转后变成垂直） */
  display: inline-block;
  margin-right: 15px;
}

.header-nav-secondary ul li a {
  text-decoration: none;
  color: #333;
}

这里通过transform-origin: top left改变旋转中心，再用translateY(-100%)把旋转后的导航拉回正确位置，完美解决偏移问题。

方案3：最简单的Flex垂直布局（无需特殊属性） #

其实不用writing-mode或rotate，直接用Flex布局就能轻松实现垂直导航，兼容性还好：

.header-social {
  width: 40px;
  height: 200px;
  border: 1px solid #eee;
}

.header-nav-secondary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 垂直排列列表项 */
  display: flex;
  flex-direction: column;
  /* 占满容器高度 */
  height: 100%;
  /* 均匀分布（可选） */
  justify-content: space-around;
  /* 文字居中 */
  text-align: center;
}

.header-nav-secondary ul li a {
  text-decoration: none;
  color: #333;
}

这个方案最直观，代码也简洁，适合大多数场景。

你可以根据自己的视觉需求选其中一种，要是需要调整间距、颜色这些细节，随时微调CSS就行～

内容的提问来源于stack exchange，提问作者D.Aktas