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

Question

通常，浮动HTML元素从左向右流动，并在容器宽度达到时落在下一行。

我想知道，如果有什么方法可以让它们浮在水底。我的意思是元素应该互相堆叠起来。

我觉得这个例子将清楚地http://jsfiddle.net/duGVa/

落在下一行的元素，即，LI-6，应该是对其它5种元素的顶部。 和元件1-5应接触容器UL的底部。

谢谢。

Answer 1

你必须务实管理为达到这样的事：

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

你可以欺骗可怕...

使用CSS转变为反转的两个UL和LIs，你会得到你想要的结果。

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测试，铬）

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