与可滚动的旋转文本垂直对齐答案

【问题标题】：Vertical align with scrollable rotated text与可滚动的旋转文本垂直对齐
【发布时间】：2016-03-30 15:07:23
【问题描述】：

我正在尝试获取一个垂直导航列表，该列表旋转 90 度以垂直滚动（相对于视口）。这个想法是菜单项可以动态添加，一旦添加，一旦使用了完整的视口高度，就应该可以垂直滚动。

当前的解决方案几乎可以工作，它会使列表水平扩展，如果您有一个狭窄的固定宽度导航栏，这并不理想。

这是来自 2 年前 previous question 的代码示例，用于说明。

html, body {
  min-height:100%;
  max-height:100%;
  height:100%;
  font-family:Oswald, sans-serif, Arial;
  font-size:14px;
  background:#fff
}
a {
  text-decoration:none
}
li {
  list-style:none
}
ul {    
  margin:0
}
.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav {    
  margin:0 auto;
  height:100%;        
}

ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}
ul.nav li a {           
  color:#fff;    
}

<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

【问题讨论】：

您必须包含其他浏览器（如 firefox）的 transform 属性和通用的属性，如 -moz-transform-origin: left top; -moz-transform:rotate(-90deg) translateX(-100%); 和 transform-origin: left top; transform:rotate(-90deg) translateX(-100%);
它只适用于chrome/safari，我不知道是不是你的要求，但它们是奇怪的要求。
@geeksal generic 适用于最新版本的 firefox、chrome 和 IE，在这种情况下，-webkit- 前缀专门用于 safari
@MarcosPérezGude 我知道，但我使用的是 firefox，如果他不包含上述属性，我将如何测试它
我也是。我总是默认使用 Firefox。有史以来最好的浏览器（即使谷歌有很多反火狐的人）

标签： html css

【解决方案1】：

只需在ul.nav 选择器中添加display:flex 并在.main-nav 中设置overflow-y:hidden 和overflow-x:auto

这是 JSBIN：http://jsbin.com/qixapariku/1/edit?html,css,output

【讨论】：

【解决方案2】：

position:fixed挡路了。因为它站在窗口区域，完全是流动的，当然不能按原样滚动

If you want it to scroll 你可以将fixed 设置为absolute

另一种方法absolute 和writing-mode 你可以看看 writing-mode 并仍然使用 transform to reverse direction：

ul {
  white-space:nowrap;
  writing-mode:vertical-lr;
  transform:scale(-1,-1);
  padding: 1em 0;
  position:absolute;/* not fixed !! */
}
li {
  display:inline;
}

<ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">METHODOLGY</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

您也可以使用 flex 和 row-reverse : http://codepen.io/gc-nomade/pen/PNKeeq 将主页链接放在第一个/顶部。

【讨论】：

感谢您的详细回复。在这样的情况下，行反转似乎真的很有用。