1

我有一个常规的无序列表，其中有一些列表项充当菜单导航 - 非常标准。我旋转了从中心旋转的列表项。列表中的菜单标题各不相同，所以看起来有点奇怪。我使用了 transform-origin 来改变项目左侧的旋转，而不是中心，但是当它像手臂一样旋转时，单词之间的间隙是不同的。有没有办法避免这种情况？所以它从左边旋转但每个单词之间的间隙是一致的？

<ul> 
     <li><a href="#">Culture</a></li>
     <li><a href="#">Eat &amp; Drink</a></li>
     <li><a href="#">Field Trips</a></li>
     <li><a href="#">Happenings</a></li>
     <li><a href="#">Locals</a></li>
    <li><a href="#">Our City</a></li>
</ul>​

ul {
    margin-top: 80px;
}
ul li {
    font-size: 9px;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}​

我已经为你包括了两个 jsFiddles。一种是对列表项进行变换，另一种是使用变换和变换原点。

http://jsfiddle.net/9eNnN/

http://jsfiddle.net/aKXnz/

谢谢大家，R

4

2 回答 2

0

如果我理解您的要求，我相信您只需要在 li 上设置一致的宽度 - 如下所示：

li { width: 5%; } // you may need to play around with this value

这是一个要演示的jsfiddle。

于 2012-11-20T20:16:32.433 回答
0

我很想看到只使用 CSS 的解决方案！

同时，我可以为您的问题提供 javascript 解决方案：http: //jsfiddle.net/aKXnz/1/

在 CSS 中，将您的菜单定义为position:absolute. 这会将您的所有链接放在左边框上（一个在另一个上）。

在 Javascript 中

var myLis = document.getElementsByTagName('li');
for(var i= 0, len = myLis.length; i< len; i++)
{
    myLis[i].style.left = (30*i) + 'px';
}​

简单地说，浏览您的菜单并定义与左侧的距离每次都变大（线性）。你会得到你想要的:)

于 2012-11-20T20:28:58.290 回答