如何将垂直文本导航栏粘贴到右边而没有间隙？

Question

如果没有 'gaps'，我想不出一种将导航栏固定在右侧的方法。我尝试了不同的边距，比如 0px，但也没有用。我正在努力实现 this navigation interface

我的 HTML 和 CSS :

html,
body {
  height: 100%;
  margin: 0;
}

nav {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  float: right;
}

.navitem {
  float: left;
  margin-right: 20px;
}

.greeting {
  position: fixed;
  right: 0px;
  margin-right: 200px;
  background-color: #000000;
  padding: 0 10px 0 10px;
}

.greetext {
  color: #ffffff;
  line-height: 5px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
  <div class="greeting" id="greeting">
    <p class="greetext" id="greetext">ahoy matey!</p>
  </div>
  <nav>
    <h2 class="navitem"><a href="">WORK</a></h2>
    <h2 class="navitem"><a href="">SKILLS</a></h2>
    <h2 class="navitem"><a href="">ABOUT</a></h2>
    <h2 class="navitem"><a href="">CONTACT</a></h2>
  </nav>
</body>

</html>

Answer 1

尝试这种方式 - ul 而不是 H2：

<head>
  <link rel="stylesheet" href="./styles/main.css" />
</head>

<body>
    <div class="greeting" id="greeting">
        <p class="greetext" id="greetext">ahoy matey!</p>
    </div>
    <nav>
        <ul>
            <li class="navitem">WORK</li>
            <li class="navitem">SKILLS</li>
            <li class="navitem">ABOUT</li>
            <li class="navitem">CONTACT</li>
        </ul>
    </nav>
</body>

</html>

样式：

html,
            body {
                height: 100%;
                margin: 0;

            }

            nav {

                float: right;
            }

            .navitem {
                display: block;
                margin-right: 20px;
-webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
                writing-mode: vertical-rl;
                padding: 20px;

            }

            .greeting {
                position: fixed;
                right: 0px;
                margin-right: 200px;
                background-color: #000000;
                padding: 0 10px 0 10px;
            }

            .greetext {
                color: #ffffff;
                line-height: 5px;
            }
        }

如何将垂直文本导航栏粘贴到右边而没有间隙？

How to stick vertical text nav bar to right without gaps?

html

css

nav

web