목록을 45도 각도로 작성하고 CSS 또는 jquery로 하단에 정렬

-45도 각도의 텍스트 ul 목록을 만들려고합니다. 또한 하단과 깔끔하게 정렬해야합니다. 간격을 잘 제어하십시오).목록을 45도 각도로 작성하고 CSS 또는 jquery로 하단에 정렬

이

<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 : 나는 jsfiddle here.

내 질문을 시작했다

.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; 
}

이 될 것입니다

는 HTML this page의 상단에있는 요소를

별도의 div에서 쉽게 제어 할 수 있습니다. 목록은 훨씬 깔끔하고 유지 보수가 쉽다). jquery 플러그인을 사용하면 더 많은 옵션을 제공합니까?

필자는 목록의 간격을 좁히면 걱정이됩니다. 필자의 HTML에서는 매우 어색하고 피들에 나타난 것처럼 보입니다.

누구나 도움을받을 수 있거나 좋은 조언이 있다면 정말 감사하겠습니다.

출처

2013-02-16 lharby

왼쪽 :

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/ 내가 점진적으로 여백을 추가 할 좋은 JQuery와 함수를 사용하여 결국

출처

2013-02-16 13:33:12

내가 그 바이올린과 내 자신의 차이를 볼 수 없습니다. 코드를 업데이트 했습니까? 즉 http://jsfiddle.net/GHWcZ/1 – lharby

아, 죄송합니다. 여기에 갈래 하나 : http://jsfiddle.net/sZjfR/ –

고마워. 이 방법을 반대하지는 않지만 각 요소에 개별 스타일링이 필요합니다. 이는 ul 및 li 요소의 스타일링보다 비용이 많이 듭니다. – lharby

목록을 45도 각도로 작성하고 CSS 또는 jquery로 하단에 정렬

답변

관련 문제