Question

I'm working on a project where I want to have a grid and a right-hand section with vertical list-items. So I would want to rotate each list item by 90 degrees.

Like so:

However, when I try to implement this styling, each list-item tends to overlap, retaining its former height, width, and position. I've isolated the issue in this 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;
      }
    }
  }
}

Does anyone know how I could properly structure these items?

Answer 1

You may take a look at 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;
      }
    }
  }
}

Rotating list items by 90 degrees

1 个答案: