CSS - 内联 block 和变换旋转问题

Question

我正在尝试构建一个菜单，其中的链接项以 90 度 Angular 运行。当你加载 codepen 时你会明白我的意思

https://codepen.io/anon/pen/BbQEPb

我遇到的问题是；即使我将抽屉导航设置为“ block ”并将 v-list 元素设置为“内联 block ”，它们仍然并排，而不是在抽屉导航下方以 90 度 Angular 堆叠。

这是我用来尝试模拟该菜单的 CSS，但我就是无法正确使用堆栈，而且我的 CSS 技能还不够高超。

  .v-navigation-drawer .v-list {
    transform: rotate(90deg) translateX(-100%);
    transform-origin: bottom left;
    display: block;
  }
  .v-list > div {
    display: inline-block;
    vertical-align:  center;
    text-align: center;
  }

像往常一样，我更多地寻找正确方向的指示，而不是完整的答案，但对其中任何一个都很满意。

提前谢谢大家。

Answer 1

事实证明父级需要在空白处设置 nowrap

我只是在寻找错误的答案。

这个 stackoverflow 问题解决了我的问题 Stacking Divs side by side in CSS