结合“列计数”和“显示：表”在 Firefox 中呈现单列

Question

我正在尝试解决 Firefox（我使用的是 40.0.3）中的一个问题，其中使用 -moz-column-count 和 display: table 会导致列表显示为一列。这是我的示例和jsfiddle：

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

我正在使用 display: table 将 div 中的列居中。在 Edge、IE10 和 Chrome 中，列表分为两列。

我的问题是如何在 Firefox 中使用 display: table 获得两列，或者如何正确地将列表居中以使其在所有浏览器中都有效。

Answer 1

实际上，我认为 Chrome 和 IE 是错误的。他们确实提供你想要的，但他们不应该，就像FF一样。

在你的代码中你'说'split-div-in-2-columns，但实际上你只输入了一个ul。当您将 ul 一分为二（参见 sn-p）时，FF 会按预期工作，CH 和 IE BTW 也是如此。

如果我创建了您的代码，我实际上会只期望一列，即 li 的 ul（或 p 的一个 div、span 的一个 p 等）。第二个 ul 将是第二列（第二个 div ......等）。因此我的结论是 Chrome 和 IE 搞砸了。

我讨厌这样的意外行为，让人不确定哪个浏览器是正确的。

这是更正后的代码：

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2; /* demo code */
}
ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
  </ul>
  <ul>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

- 使用额外的演示代码更新 -

此外还有一些演示 sn-p 如何在没有 table 的情况下使用它。只需将您的代码删除表格内容并将column-count移动到ul。

同样有效：

ul, li {
    list-style-type: none; padding: 0;
}

div {
    width: 500px; /* just some width */
    border: 2px dashed silver;
    margin: 0 auto; /* center in body */
}
ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    margin: 0 auto; /* center in div */
}

li {
    border: 1px dotted red;
}

 <div>
    <ul>
        <li>abcd</li>
        <li>b</li>
        <li>cdefg</li>
        <li>d</li>
    </ul>
</div>

Answer 2

如何正确地使列表居中以使其适用于所有浏览器？

您可以使用 CSS3 灵活的框布局来居中对齐列表。由于您使用的是 CSS3 多列布局，我假设您正在为现代浏览器构建列表。因此，flexible box 方法是可行的方法。

1. 让<div> 成为灵活项目容器。 justify-content:center 将列表与中心对齐。

2. 设置列计数 <ul>。您可以设置*-column-gap 之间的间距 列。

适用于 Firefox、Chrome、Internet Explorer、Edge 和 Opera（即基本上所有浏览器）。这是JSfiddle demo

* {
  margin: 0;
  padding: 0;
}
div {
  display: flex;
  justify-content: center;
}
ul {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  -moz-column-gap: 100px;
  -webkit-column-gap: 100px;
  column-gap: 100px;
}
h2 {
  text-align: center;
  margin-bottom: 10px;
}

<h2> Centered CSS3 multi-column layout </h2>
<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Answer 3

您应该在 ul 上使用 display:block，因为列计数在 Firefox 中无法与 display:table 一起正常工作。

您可以使用width: fit-content; 将 div 中的列居中。

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}
ul {
  display: block;
  margin: 0 auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;

}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Answer 4

可以使用@supports 规则检查 Firefox。
由于其他浏览器不支持-moz-column-count，因此不受影响。
FF 可以在该块内获得单独的解决方案。

https://jsfiddle.net/094gmjp2/5/

div {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

ul {
    display: table;
    margin: 0 auto;
}

@supports (-moz-column-count: 2) {
    ul {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
    }
}

<div>
    <ul>
        <li>asadf</li>
        <li>b</li>
        <li>cadsfa</li>
        <li>d</li>
    </ul>
</div>