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

Question

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

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

我遇到的问题是；即使我将导航抽屉设置为“阻止”，而将v-list项目设置为“内联阻止”，它们仍然并排放置，没有沿导航抽屉向下90度角堆叠。

这是我用来尝试模拟该菜单的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