如何垂直制作导航栏？ [复制]

Question

我有一个导航栏，我需要让它垂直。我的列表项也应该是垂直的。我尝试使用writing mode 和text orientation，但它溢出了页面。然后我使用transform: rotate(-90deg) 作为我的无序列表，但它会向上。这是我的 HTML：

<div class="header-social">
  <nav class="header-nav-secondary">
    <ul>
      <li><a href="#">twitter</a></li>
      <li><a href="#">behance</a></li>
      <li><a href="#">dribble</a></li>
      <li><a href="#">linkedin</a></li>
    </ul>
  </nav>
</div>

我正在努力做到这一点。 Image.

Answer 1

transform: rotate(-90deg)是要走的路，但你还需要使用transform-origin定义右上角旋转的“根位置”，float右侧导航栏的内容并使列出项目inline-blocks 以便将它们放在一行中。

body {
  margin: 0;
}

.header-social {
  float: right;
  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
  background: #eee;
}

li {
  display: inline-block;
  padding: 10px;
}

<div class="header-social">
  <nav class="header-nav-secondary">
    <ul>
      <li><a href="#">twitter</a></li>
      <li><a href="#">behance</a></li>
      <li><a href="#">dribble</a></li>
      <li><a href="#">linkedin</a></li>
    </ul>
  </nav>
</div>