1

可以说我有以下列表：

<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 并按原样订购，而且我正在使用引导程序。反应灵敏，没有桌子等等..

任何帮助非常感谢谢谢。

4

8 回答 8

3

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

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

使用 870px 是因为作者在问题中声明了该值。这也可以是任何其他值。

于 2013-03-07T13:29:54.327 回答
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/

于 2013-03-07T13:32:59.407 回答
1

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

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

注意：IE8及更低版本不支持

这里有一些 javascript/jQuery 用于 IE8 和 IE7 支持：

if (document.all && !document.querySelector || document.all && document.querySelector && !document.addEventListener) {
   $("li").each(function (index) {
      if (index % 4 === 0)
         $(this).css('clear', 'both');
   });
};
于 2013-03-07T13:28:46.047 回答
0

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

于 2013-03-07T13:25:58.477 回答
0

看看这个页面

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

希望能帮助到你

于 2013-03-07T13:26:58.643 回答
0

另一种解决方案将与列一起使用。

ul{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
于 2013-03-07T13:54:53.727 回答
0

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

于 2013-03-07T13:28:35.727 回答
0

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

  ul
  {
    width: 500px;
  }

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

链接到现场演示。

于 2013-03-07T13:31:15.833 回答