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%;
}​

2 つの jsFiddles が含まれています。1 つはリスト アイテムの変換を使用し、もう 1 つは変換と変換元を使用します。

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。これにより、すべてのリンクが左の境界線に配置されます (上下に 1 つ)。

ジャバスクリプトでは

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 に答える