0

我正在尝试创建一个 ul 文本列表，其角度为 -45 度，还需要与底部对齐并整齐地间隔（这样我就可以很好地控制间距）。

喜欢本页顶部的元素

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 回答