0

-45 度の角度の付いたテキストの ul リストを作成しようとしていますが、これも下に揃えて適切な間隔で配置する必要があります (間隔を適切に制御できるようにするため)。

このページの上部にある要素のように

HTML:

 <div class="route-diagram">
        <ul class="routes">
            <li class="first">Pennywell, Quarry View</li>
            <li>Pallion, Forfield Road</li>
            <li>Royal Hospital, Hylton Road</li>
            <li>Millfield Metro</li>
            <li>Sunderland, Green Terrace</li>
            <li>Lorem Ipsum</li>
            <li>Lorem Ipsum</li>
        </ul>
   </div>

CSS:

 .route-diagram ul.routes {
list-style:none;
 }

.route-diagram ul.routes li {
display:inline;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*
-webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
*/
zoom:1;
 }

ここでjsfiddleを開始しました。

私の質問は、これは別々の div で制御する方が簡単かということです (リストの方がはるかにクリーンで維持しやすいようです)。または、jquery プラグインを使用すると、より多くのオプションが提供されますか?

リストの間隔をうまく調整することを心配しています。私のhtmlでは非常に厄介で、フィドルに示されているようです。

誰かがこれを手伝ってくれるか、良いアドバイスがあれば、本当に感謝しています.

4

2 に答える 2

0

各要素をローテーションする代わりに、リスト全体をローテーションしました。これには、次のような冗長なCSS構文をかなり追加する必要がありました。

.elemX { margin-left: Ypx; }

それでもある程度の磨きが必要ですが、それでもあなたが望むように機能するようです：http: //jsfiddle.net/GHWcZ/

于 2013-02-16T13:33:12.077 に答える
0

残りのマージンを段階的に追加するために、素晴らしいjquery関数を使用することになりました。

 var $addMargin = 0;
 var $listItems = $('ul.routes li');
     $listItems.each(function(){
         $addMargin += 25;
         $(this).css('margin-left', $addMargin + 'px');
    });
于 2013-02-20T11:47:16.007 に答える