7

我正在尝试创建一个如下所示的项目列表：

浮动列表

主要要求是列表应该灵活，可以在不接触代码的情况下添加或删除列表项。

到目前为止，我发现的最佳解决方案是将所有列表项（包括标题）放入<li>标签中，并使用此A List Apart 文章中介绍的一种技术设置它们的样式：

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

我想知道 Stack Overflow 上是否有更好的建议。

4

6 回答 6

5

可能您可以干净利落地实现这一点（无需 javascript）的唯一方法是使用column-countCSS 属性。IE 仅支持 10+ 版本：http: //caniuse.com/multicolumn

这是一个演示：http: //jsbin.com/efiqov/2/

此外，标题应该是标题，而不是列表项。

于 2012-07-09T10:19:48.830 回答
2

只要您不需要支持旧版浏览器，您就可以使用 CSS3 多列...

http://www.quirksmode.org/css/multicolumn.html

然后只需为每个类别使用一个无序列表。

于 2012-07-09T10:08:47.470 回答
2

您可以使用 css3 多列轻松克服这个问题。对于 ie 浏览器，您也可以使用脚本。请参阅链接查看更多细节

http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript

于 2012-07-09T10:30:30.683 回答
1

由于您具有进行预处理的完整能力并且具有固定<li>的高度，因此请考虑 PHP 中的以下内容：

$menu=array(
    "header" => "Drinks",
    "item" => "Drink 1",
    "item" => "Drink 2",
    "item" => "Drink 3",
    "item" => "Drink 4",
    "header" => "Meats",
    "item" => "Meat 1",
    "item" => "Meat 2",
    "item" => "Meat 3",
    "item" => "Meat 4"
);

$item_count = 0;
$items_per_column = 5;

echo "<ul>";
foreach($menu as $key=>$value)
{
    if($item_count % $items_per_column == 0)
    {
        echo "</ul><ul>";
    }

    $item_count ++;

    echo "<li class='".$key."'>".$value."</li>";
}
echo "</ul>";

这是未经测试的，但应该可以正常工作。只需给每个<ul>a float: left，它们就会彼此堆叠在一起。

于 2012-07-09T10:57:28.760 回答
1

从根本上讲，这就是您所需要的，无需 css3、js 或 php，适用于任何浏览器的任何版本等。

四列

li {width: 25%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

三列

li {width: 33%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

等等。

少即是多，拥抱简单！

于 2013-06-02T18:55:04.673 回答
0

您可以使用jQuery-Columns 插件非常轻松地做到这一点，例如将具有 .mylist 类的 ul 拆分为 5 列

$(document).ready( function () {
  $('.mylist').cols(5);
});

这是jsfiddle 上的一个活生生的例子

于 2014-05-03T14:17:43.490 回答