創建列表角度45度，並與css或jquery底部對齊

我想創建一個角度爲-45度的文本的ul列表，也需要對齊到底部和整齊的間距（好所以我可以控制間距很好）。創建列表角度45度，並與css或jquery底部對齊

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 here.

我的問題是會變成這樣更容易控制在單獨的div（看起來好像清單更清潔，更容易維護）。另外一個jQuery插件會給我更多的選擇嗎？

我很擔心將列表很好地分開，它似乎在我的html中非常尷尬，如小提琴中所示。

如果任何人都可以幫助或有一些很好的建議，我會很感激。

來源

2013-02-16 lharby

最後我用一個漂亮的jQuery的功能，以逐步增加保證金左：

var $addMargin = 0; 
var $listItems = $('ul.routes li'); 
    $listItems.each(function(){ 
     $addMargin += 25; 
     $(this).css('margin-left', $addMargin + 'px'); 
    });

來源

2013-02-20 11:47:16 lharby

而是每一個元素旋轉，我旋轉了整個列表，這需要增加相當多的冗餘CSS語法，如：

.elemX { margin-left: Ypx; }

仍然需要一些拋光，但它似乎工作，你想要的東西：http://jsfiddle.net/GHWcZ/

來源

2013-02-16 13:33:12

我不能看到小提琴和我自己之間的任何差別。你有沒有更新代碼？即http://jsfiddle.net/GHWcZ/1 – lharby 2013-02-16 14:05:03

啊，對不起。這是分叉的：http://jsfiddle.net/sZjfR/ – 2013-02-16 14:07:04

謝謝。雖然我不反對這種方法，但它確實需要對每個元素進行單獨造型，這比造型ul和li元素更昂貴。 – lharby 2013-02-16 19:00:53

創建列表角度45度，並與css或jquery底部對齊

回答

相關問題