相关疑难解决方法(0)

我担心我不知道如何解释它以及我可以展示它.所以我设置了这个小提琴.

如您所见,导航菜单不在应有的位置.它应该精确地设置在头元素的底部边框和左边框.即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;
}

它是如何工作的:你可以在Fiddle项目中看到这一点. …