如何更改水平li列表的顺序？

Question

我通过HTML列表制作了几个框，每个框将包含图片和文本，但是整个框都应该有一个链接。 无论如何列表都是这样的：

li{float:left;}

视频1 | Video2 | Video3 | Video4 |

视频5 |

但是由于我的列表将是2行，因此我希望它像这样：

视频1 | Video3 | 视频5 |

Video2 | Video4 |

我该怎么做？ 这是演示： http : //jsfiddle.net/KjcKR/

我知道可以用表格制作，但是现在我被告知表格不是那么标准，这就是为什么我想用列表制作表格

Answer 1

您可以使用列宽http://jsfiddle.net/KjcKR/1/

ul {
    width:800px;
    background-color:#900;
    list-style-type: none;
    -moz-column-width:190px;
    -webkit-column-width:190px;
    column-width:190px;
}

Answer 2

您可以更改ul的宽度，以便它自动将仅3个元素放入第一行，或者将您的列表分为两个ul元素，并为其display: block ， width为100％，因此它们采用全宽

Answer 3

您可以使用CSS3多列布局

ul {
    column-width: 380px;
    -webkit-column-width:380px;
    -moz-column-width: 380px;
    height:440px;
}  

请注意，这在IE8及更高版本中不起作用。

http://jsfiddle.net/tutspack/8jw6r/

您可以将此JavaScript polyfill用于较旧的浏览器-http: //jsfiddle.net/gryzzly/Umz6a/