html – 如何在组中布置列表项

概述假设我们有一个像这样的html列表： <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... <li>10</li></ul> 如何使用css和/或java脚本让浏览器像这样显示它(以四个为一组,组之间有一些边距)： 1 2 5 6 9 103 4 假设我们有一个像这样的HTML列表：

<ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    ...    <li>10</li></ul>

如何使用CSS和/或java脚本让浏览器像这样显示它(以四个为一组,组之间有一些边距)：

1 2    5 6    9 103 4    7 8

解决方法 你可以使用CSS3 column-count属性：

像这样写：

.colWrap {    -webkit-column-count: 3;    -moz-column-count: 3;    -o-column-count: 3;    -ms-column-count: 3;    column-count: 3;    -webkit-column-wIDth:20px;    -moz-column-wIDth:20px;}li {    display:inline;}div{    wIDth:120px;}

检查这个http://jsfiddle.net/rJTGJ/2/

总结

以上是内存溢出为你收集整理的html – 如何在组中布置列表项全部内容，希望文章能够帮你解决html – 如何在组中布置列表项所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。