我正在尝试实现一个具有链接的垂直导航菜单，并且已使用css3将链接文本旋转到270度。之所以旋转它，是因为我希望文本从下到上。问题是当我添加一个填充顶部时，它会出现不一致的间距。您可以看到我的代码here。我无法理解正在占用的不同空间。我还尝试给li设置一个高度，但是没有用。如果有人可以帮助我，请。这是我的代码:
HTML :
<div class="main-nav">
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">METHODOLGY</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
CSS :
.rotate{
-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);writing-mode:lr-tb}
html, body {
min-height:100%;
max-height:100%;
height:100%;
font-family:Oswald, sans-serif, Arial;
font-size:14px;
background:#fff
}
a {
text-decoration:none
}
li {
list-style:none
}
ul {
padding:0;
margin:0
}
.main-nav {
width:45px;
float:left;
height:100%;
position:fixed;
background:#4c4c4c
}
ul.nav {
width:21px;
margin:0 auto
}
ul.nav li:first-child {
padding-top:35px
}
ul.nav li {
padding-top:124px
}
ul.nav li a {
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform:rotate(270deg);
writing-mode:lr-tb;
float:left;
width:21px;
color:#fff
}
最佳答案
旋转每个a元素或li元素将使我们遇到一些问题间距，将元素精确定位到我们想要的位置。我们应该构建导航菜单，使其水平分布，首先看起来可以，然后我们只需要旋转导航菜单的整个容器即可。这是更新的代码:
.main-nav {
width:100vh;
height:45px;
position:fixed;
background:#4c4c4c;
-webkit-transform-origin: left top;
-webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {
margin-right:20px;
float:right;
height:100%;
line-height:45px;
}
菜单应该具有固定的
45px高度(旋转后为宽度)。我们使用line-height:45px将a元素垂直居中(旋转后将其水平放置)。首先，.main-nav将像这样水平放置:我们需要围绕
-90deg指定的点left - top旋转它transform-origin: left top(逆时针旋转)。旋转后，所有的.main-nav都将不可见，如下所示:因此，我们需要将其沿
100% of width的距离向下平移，但是请注意，我们并没有使用translateY，这似乎意味着它是垂直平移，因为旋转后，X轴变为垂直(而不是像以前那样水平)使用translateX(-100%)(正方向是向上，旋转之前是向右)。然后我们有:这只是与CSS3中的转换有关的简单用例。对于
vh单位，它是相对于视口(viewport)高度的单位。 100vh表示100% of viewport's height。我们必须将100vh用作width，因为旋转后，width变为height。它应该填满视口(viewport)的整个高度。但是，您可以通过px 为min-width 设置一些width，以限制width的最小值。这是因为当您调整窗口大小时，视口(viewport)的高度可能会变小，因此width会相应缩小。另请注意，我们不必使用float:left来将li用作float:right元素，而是先从上到下依次显示 Home 菜单，否则(使用float:left)将在最后(在底部)出现 Home 菜单)。此处的transform有一些高级用法(对于新手)，它为transform属性使用了1个以上的转换，所有转换都由空格分隔，并且转换顺序很重要。例如rotate(-90deg) translateX(-100%)意味着先旋转-90deg，然后沿X轴平移-100%，而translateX(-100%) rotate(-90deg)相反，这是完全不同的事情，当然不起作用(产生意外结果)。Jsbin Demo.
关于css - 具有旋转文字的垂直导航，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23870696/