Question

我按HTML列表制作了几个框，每个框都包含图片和文字，但整个框应该是一个链接。无论如何，列表是横向的，如下所示：

li{float:left;}

视频1 | Video2 | Video3 | Video4 |

视频5 |

但是因为我的列表将是2行所以我希望它是这样的：

视频1 | Video3 | Video5 |

视频2 | 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/

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

3 个答案: