我想不出一种方法来将导航栏固定在右边而没有“间隙”。我尝试了不同的边距，比如 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>最佳答案
尝试这种方式 - 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;
}
}
关于html - 如何将垂直文本导航栏粘贴到右边而没有间隙？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59439328/