CSS 垂直导航字母

Question

我非常新，试图实现垂直导航，甚至链接和字母都是垂直的。 到目前为止，我将所有内容都设置为垂直，但是现在我遇到了链接挤压在一起的问题，因为它们没有空间？

在图 1 中，您可以看到我想要完成的任务，图 2 是我到目前为止所做的事情。

不确定显示应该是块还是内联块..

垂直导航

这是我的代码： html （带有 php）

    <div class="container">
  <div class="navigation">
    <div class="navigation__left">
      <a class="header__logo" href="<?= home_url(); ?>"><?php bloginfo('name'); ?></a>
    </div>
    <nav aria-label="primary">
      <div class="inner">
        <?php dazy_top_nav(); ?>
      </div>
    </nav>
  </div>
</div>

scss:

.menu {
  margin: 5px 0 0;
  padding: rem-calc(100 20);
  list-style: none;
  font-size: rem-calc(22);
  text-align: center;
  @include breakpoint($medium) {
    margin: rem-calc(0 -15);
    padding: 0;
    font-family: $regular;
    font-size: unquote("clamp(0.938rem, 0.5vw + 0.8rem, 1.375rem)");
    font-weight: 400;
    line-height: unquote("clamp(1.25rem, 0.9vw + 1rem, 2.125rem)");
    letter-spacing: -0.01em;
    text-align: initial;
  }
  &__item {
    padding: rem-calc(10 0);
    width: 100%;
    white-space: nowrap;
    @include breakpoint($medium) {
      padding: rem-calc(20 0);
    }
  }
  &__link {
    color: $black;
    text-decoration: none;
    display: block;
    transform: rotate(-90deg);

和：

.navigation {
  height: 100%;
  width: 49px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  padding-top: 20px;
  .inner {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    list-style: none;
    background-color: $white-fever;
    transition: transform linear 300ms;
    visibility: hidden;
    @include breakpoint($medium) {
      padding: 0;
      transform: translateY(0);
      flex-direction: row;
      background-color: transparent;
      position: relative;
      visibility: visible;
      transition: none;
    }
    .is-open & {
      transform: translateY(0);
    }
  }
}

Answer 1

一个快速的解决方案是结合使用两者：

• writing-mode: Vertical-lr;
• transform:rotate(0.5turn);

这是一个简单的示例：

ul {
  list-style: none;
  writing-mode: vertical-lr;
}

li {
  display: inline-block;
  transform: rotate(0.5turn)
}


/* Next two rules are just here to show you the space taken by the links */
li a {
  background-color: #ccc;
}

li:nth-child(odd) a {
  background-color: #999;
}

<ul>
  <li><a href="">item 1</a></li>
  <li><a href="">item 2</a></li>
  <li><a href="">item 3</a></li>
  <li><a href="">item 4</a></li>
  <li><a href="">item 5</a></li>
  <li><a href="">item 6</a></li>
  <li><a href="">item 7</a></li>
  <li><a href="">item 8</a></li>
  <li><a href="">item 9</a></li>
  <li><a href="">item 10</a></li>
</ul>

更多信息：
MDN 上的书写模式定义

书写模式 CSS 属性设置文本行是水平还是垂直布局，以及块前进的方向。当为整个文档设置时，应设置在根元素（HTML 文档的 html 元素）上。