javascript - 我可以让列表项看起来像一个堆栈吗

Question

通常，浮动 HTML 元素从左到右流动，如果达到容器的宽度，则落在下一行。

我想知道，是否有任何方法可以让它们漂浮在底部。我的意思是元素应该彼此向上堆叠。

我认为这个例子会让http://jsfiddle.net/duGVa/

落在下一行的元素，即 LI-6，应该在其他 5 个元素的顶部。并且元素 1-5 应该接触到容器 UL 的底部。

谢谢你。

Answer 1

你可以作弊很可怕...

使用 CSS 转换来反转 UL 和 LI，你会得到你想要的结果。

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv();
}

看到这个小提琴（在 Firefox、Chrome 中测试）

Answer 2

将您的列表放在一个部门<div>中可以使其成为一个单元。

然后使用 CSS 你可以强制每个列表项<li>居中。

最后，为了确保每个列表项彼此对齐<li>，您可以使用 CSS 将它们的宽度设置为相同。

那应该显示为堆栈。这是一个例子..

<style type='text/css'>
#stack{
align: left;
}
#stack > ul {
align: center;
}
#stack > ul > li{
align: center;
width: 80px;
border: 2px solid black;
text-decoration: none;
}
</style>

<div id="stack">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

Answer 3

你必须务实地设法实现这样的目标：

<ul>
    <li>LI 6</li>
</ul>
<ul>
    <li>LI 1</li>
    <li>LI 2</li>
    <li>LI 3</li>
    <li>LI 4</li>
    <li>LI 5</li>
</ul>

检查这个

Answer 4

我感谢meouw他在下面提到的好答案

引用者meouw

/* Only showing mozilla and webkit transforms */
ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
   -moz-transform: scaleY(-1);
   -webkit-transform: scaleY(-1);
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
}

但这里是跨浏览器解决方案：

/* For All browsers : Chrome. Firefox, Mozilla, IE7+(tested), Opera */

ul {
    width: 500px;
    height: 100px;
    background: #def;
    list-style-type: none;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

li {
    background: #aaa;
    width: 50px;
    height: 40px;
    float: left;
    margin: 5px 25px;
    -moz-transform: scaleY(-1); /* for Mozilla */
    -webkit-transform: scaleY(-1); /* for Webkit Safari/Chrome*/
    -o-transform: scaleY(-1); /* for Opera*/
    -ms-transform: scaleY(-1); /* for IE9 + */
    filter: flipv(); /* for IE9 below */
}

对于 IE 9 下面您可以使用过滤器：flipv(); 请参阅参考