Question

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

我想知道，如果有任何方法可以使它们漂浮在底部。我的意思是元素应该相互叠加。

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

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

谢谢。

enter image description here

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();
}

请参阅this fiddle（在firefox，chrome中测试过）

Answer 2

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

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

Check this

Answer 3

将您的列表放在一个部门<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 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(); See Reference

我可以使列表项看起来像堆栈

4 个答案: