Question

假设我有以下列表：

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>

<li>item4</li>
<li>item5</li>
<li>item6</li>

<li>item7</li>
<li>item8</li>
</ul>

我需要它在网页上显示如下：

item1    item2    item3
item4    item5    item6
item7    item8

我将如何实现这一目标？使用CSS是否容易，还是有一些神奇的PHP技巧？

我收到了一些答案，但它们似乎都基于我的解决方案，但它需要采取870px并按此订购，我也使用bootstrap。如此敏感，没有表等......

任何帮助非常感谢谢谢。

Answer 1

Woudn`t使用css样式如下就足够了？

ul{
    width: 870px;
}
li{
    width: 33.33%;
    float: left;
}

使用了870px，因为作者在问题中说明了这一点。这也可以是任何其他价值。

Answer 2

尝试设置无序列表的宽度

<style>
ul{
  width: 30em;//<<<
}

ul li{
  float: left;
  width: 10em;
}
</style>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

行动中：http://jsfiddle.net/zsLUa/

Answer 3

如果您只需要连续显示3个项目，那么css :nth-child会有所帮助：

li:nth-child(3n-1) {
   clear: both;
}

注意：它不适用于IE8及更低版本

这里有一些针对IE8和IE7支持的javascript / jQuery：

if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) {
   $("li").each(function (index) {
      if (index % 4 === 0)
         $(this).css('clear', 'both');
   });
};

Answer 4

那真是一个CSS的东西。请阅读：http://alistapart.com/article/css-floats-101。

Answer 5

看看这个页面

http://d.alistapart.com/multicolumnlists/example1.html

希望有所帮助

Answer 6

考虑使用没有边框的html表。

Answer 7

这个CSS对我有用。调整宽度以满足您的需求。

  ul
  {
    width: 500px;
  }

  li
  {
      display:inline-block;
      width: 160px;
  }

Link to a live demo

Answer 8

其他解决方案将与列一起使用。

分组和定位列表项（li）

8 个答案: