这是可能的列表？

我想知道如果它可能使像这样的列表： make list like this 这是可能的列表？

或者我应该只使用的div来完成同样的事情？

2012-02-23 Meisam Mulla

的一种方式，我能想到的，就是有相邻'div'每到acomodate垂直组三个'li' – check123 2012-02-23 04:27:07

你可以这种类型的列表也使用表格。 – NewUser 2012-02-23 04:27:44

@newuser你可以使用一个表，但只有当数据是表格数据时，否则它很难维护和滥用表元素应该被用于什么。 – 2012-02-23 04:43:23

这是possbile纯CSS（浮动），以得到这样的列表：

LI1 LI2 
LI3 LI4 
LI5 LI6

但要获得：

LI1 LI4 
LI2 LI5 
LI3 LI6

你需要使用JavaScript或2列出了与css造型。（编辑：或作为另一个答案由cale_b提到，现代浏览器，你可以使用column-count）

的CSS我的第一个场景会是这个样子：

ul { width:400px; overflow:hidden; margin:0; padding:0; } 
li { width:200px; float:left; margin:0; padding:0; }

调整宽度，边距和补到你当然喜欢

来源

2012-02-23 04:27:05

这正是我一直在寻找的感谢！ – 2012-02-23 04:28:40

没问题，很高兴帮助:) – 2012-02-23 04:31:06

我认为第二种情况也可以通过LI顺序的小调整和使用相同的代码来实现。更优雅地使用nth-child。 http://jsfiddle.net/r5G9p/ – 2012-02-23 06:09:57

当然。取决于是否需要项目首先在列中向下流动，或者是否可以从左向右流动。

如果左到右是确定的，只是指定显示：块，浮动：左，宽度为li元素：

li { 
    display: block; 
    width: 150px; 
    float: left; 
}

如果你正在寻找它放下来流动，再向右，然后有一些技术涉及CSS3列数（仅适用于现代的浏览器）现代浏览器：

ul { 
    -moz-column-count:2; /* Firefox */ 
    -webkit-column-count:2; /* Safari and Chrome */ 
    column-count:2; 
}

你的第三个选择是两个列表并排侧使用，

或者，如你所说，divs。

来源

2012-02-23 04:28:29

+1列数 – 2012-02-23 04:31:46

我想你可以，但两个div与一个列表中的每个我认为会更好。

来源

2012-02-23 04:28:47 okayGraphics

使用列表很容易。你有没有尝试过？

这只是CSS的问题。

刺在黑暗中：

ul { list-style: none; width: 400px; background: #eee; } 
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; } 

<ul> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ul>

Demo here

来源

2012-02-23 04:29:50 Scott

这是可能的列表？

回答

相关问题