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

【问题标题】：CSS - Issue with inline-block and transform rotateCSS - 内联块和变换旋转问题
【发布时间】：2019-03-06 06:26:44
【问题描述】：

我正在尝试构建一个菜单，其中链接项目以 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;
  }

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

提前谢谢大家。

【问题讨论】：

标签： css vuetify.js

【解决方案1】：

原来需要在空白处使用 nowrap 设置父项

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

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

【讨论】：