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

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

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

让<div>成为灵活项目容器。 justify-content:center会将列表与中心对齐。
设置列数 <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 2

实际上，我认为Chrome和IE是错误的。他们做提供您想要的内容，但不应，如FF。

在您的代码中，您说'＆＃39; split-div-in-2-columns 但基本上只放入一个 ul 。当您将 ul 分成两部分时（请参阅代码段），然后FF按预期工作，CH和IE BTW也是如此。

如果我创建了你的代码，我实际上会只期望一个列，即一个列的句子（或p的一个div，一个跨度的一个＆＃39） ;等等）。第二列是第二列（第二列......等）。因此我的结论是Chrome和IE陷入困境。

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

以下是更正后的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

另外一些演示片段如何在没有table的情况下使用它。只需您的代码删除表格内容并将column-count移至 ul 。

同样有效：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您应该在ul上使用<div class="header"> <img src="images/basketball-rims-header.gif"> </div> <div class="nav"> <ul> <li> <a href="index.html">Home</a></li> <li>|</li> <li> <a href="http://www.nba.com/news/">News</a></li> <li>|</li> <li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a></li> <li>|</li> <li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a></li> <li>|</li> </ul> </div>，因为列数不能在Firefox中与display:block一起正常使用。

您可以使用display:table将div中的列居中。

＆＃13;

width: fit-content;

＆＃13;

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;

}

＆＃13;

Answer 4

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

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

＆＃13;

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;
    }
}

＆＃13;

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

＆＃13;

结合“column-count”和“display：table”会在Firefox中呈现单列

4 个答案: