2

假设您指定了一些高度为 500 像素的 div。在这个 div 中，你有一个列表 - 可能是 ol 或 ul - 而不是从左到右、从上到下填充它（这可以通过 li 元素上的 display:inline-block 来完成），你想要填充它从右到左，从下到上。

我认为从右到左可以通过 li 元素中的 float:right 之类的方法来完成，但我想知道从下到上？

示例结果（elem1 在 elem2 之前填充等）：

-----------------------------------
[elem10][elem9][elem8][elem7][elem6]
[elem5][elem4][elem3][elem2][elem1]
-----------------------------------

（所以这有点像把积木放在一起然后向右滑动。）

我希望我想多了，实际上有一个简单的方法可以做到这一点。

想法赞赏。

PS。我在 HTML5 中看到了 ol 的新 'reversed' 属性，即使这有帮助，我也更愿意避免现在浏览器支持很少的东西。

4

6 回答 6

2

仅受 WebKit 支持，但-webkit-writing-mode: horizontal-bt;似乎可以工作：http: //jsfiddle.net/zzXhp/

它可能还有其他前缀属性。显然，它的支持不是很好。

于 2013-03-20T18:59:34.837 回答
2

只需旋转列表，然后反向旋转 li 的

HTML是

<ul class="container">
<li class="inner">one</li>
....
</ul>

CSS是

.container {
    left: 46px;
    top: 100px;
    width: 400px;
    height: 400px;
    position: absolute;
    border: 1px solid black;
    background-color: lemonchiffon;
}

.inner {
    background-color: lightsalmon;
    font-size: 20px;
    margin: 20px;
    width: 80px;
    float: left;
}

.container:hover,
.container:hover li {
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 3s;
}

在DEMO中我做了悬停的效果，只是为了让它更漂亮。真正的代码将没有过渡:-)

于 2013-03-21T16:53:21.423 回答
0

要从右到左显示某些内容（通常是阿拉伯语页面），您应该使用dir tag.

dir="rtl"： 右到左

<ul id="myList" dir="rtl">
    <li>1st</li>
    <li>2nd</li>
    <li>3rd</li>
</ul>

这是一个JSFIDDLE

一个简单的 JavaScript 来完成整个工作，rtl不需要。

var list = document.getElementById("myList");
var i = list.childNodes.length;
while (i--)
  list.appendChild(list.childNodes[i]);

这是一个JSFIDDLE

于 2013-03-20T18:29:25.510 回答
0

这是从下到上填充并右对齐的解决方案：

#mylist {
    position:absolute;
    top:58px;
    right:4%;
    height:40px;// height of max rows you might need - this allows two rows for me
    line-height:1;
    font-size:14px;
    margin:0;
    border: 1px dashed #38e800;
}
#mylist ul {
    position:absolute;
    bottom:0;
    right:0;
    overflow: hidden;
    vertical-align:bottom;
    list-style: none;
    text-align:right;
    margin:0 0 2px 0;
 }
#mylist li {
    display:inline-block;
    padding:0 0 0 18px;
}
于 2015-11-20T10:00:35.923 回答
0

我制作了一个较短的、未格式化的@vals 答案版本，归功于他。

的HTML：

<ul class="reverse">
   <li>one</li>
   ...
</ul>

CSS：

.reverse {
   position: absolute;
   list-style: none;
}

.reverse li {
   margin: 5px;
   float: left;
}

.reverse,
.reverse li {
   -webkit-transform: rotate(180deg);
}

JSFIDDLE

于 2015-10-13T08:24:41.553 回答
0

使用下面的 CSS 从下到上反转：

ul { 
    display: flex;
    flex-direction: column-reverse;
}

或使用下面的 CSS 从右到左反转：

ul { 
    display: flex;
    flex-direction: row-reverse;
}
于 2017-08-24T09:38:19.050 回答