我担心我不知道如何解释它以及我可以展示它.所以我设置了
this Fiddle.
如您所见,导航菜单不在应有的位置.它应该精确地设置在头元素的底部边框和左边框.即bottom：0和left：0.但是,我设置-90degs的旋转很明显,nav元素的绝对定位是在旋转之前发生的,或者更确切地说是在原始元素上,就好像旋转没有存在.
我尝试过使用：before和：after伪元素来试试看我是否可以这样解决.但我无法完全掌握这些伪元素.在这两种情况下,都绕过了旋转. (没有旋转,nav元素显然将自己定位在它应该的位置.)
这基本上是代码：
<div id="head">
<div id="title">My Web</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Something Else</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
没有什么花哨.
这就是CSS(这个问题的重要部分)：
#head {
position: relative;
}
nav {
position: absolute;
bottom: 0;
left: 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
nav a {
display: inline-block;
padding: 0 9px;
}
它是如何工作的：you can see this in the Fiddle project.
希望有人可以帮助我.
附：此外,有时,并且取决于< a>内的文本的大小.似乎,导航中垂直元素之间的距离略微增加,就像在半个像素中一样,意味着边界变得模糊. You can see this in this other version中仅有4个字符,并且在< a>之一中有空格.元素.无法理解为什么这会有所作为.但是,当它发生时,它会使菜单看起来很糟糕！
