将列表项旋转 90 度答案

【问题标题】：Rotating list items by 90 degrees将列表项旋转 90 度
【发布时间】：2016-11-13 23:20:11
【问题描述】：

我正在做一个项目，我希望有一个网格和一个带有垂直列表项的右侧部分。所以我想将每个列表项旋转 90 度。

像这样：

但是，当我尝试实现这种样式时，每个列表项往往会重叠，保留其原来的高度、宽度和位置。我已经在这个JSFiddle 中隔离了这个问题。

HTML

<body>
  <div class="grid">
    <h1>Some other content</h1>
  </div>
  <ul class="section-list">
    <li class="section-tab"><a href="#">Breakfast</a></li>
    <li class="section-tab"><a href="#">Lunch</a></li>
    <li class="section-tab"><a href="#">Dinner</a></li>
    <li class="section-tab"><a href="#">Blah</a></li>
  </ul>
</body>

CSS

body {
  .grid {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section-list {
    float: left;
    max-width: 68px;
    background: #fff;
    .section-tab {
      list-style: none;
      display: inline-block;
      transform: rotate(90deg);
      white-space: nowrap;
      a {
        display: block;
        padding: 16px 20px;
      }
    }
  }
}

有谁知道我可以如何正确构建这些项目？

【问题讨论】：

标签： html css rotation transform

【解决方案1】：

你可以看看writing-mode

update possible of your code:

body {
  .grid {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section-list {
    float: left;
    max-width: 68px;
    background: #fff;
    .section-tab {
      list-style: none;
      display: inline-block;
      -webkit-writing-mode: vertical-lr;
      /* old Win safari */
      writing-mode: vertical-rl;/* FF */
      writing-mode: tb-lr;
      /* writing-mode:sideways-lr;  could be the one */
      /* eventually untill sideways-lr is working everywhere */
      transform: scale(-1, -1);
      white-space: nowrap;
      a {
        display: block;
        padding: 16px 20px;
      }
    }
  }
}

【讨论】：