列表列数不确定html,结合“column-count”和“display：table”会在Firefox中呈现单列...-CSDN博客

4 个答案:

答案 0 :(得分：7)

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

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

让

成为灵活项目容器。 justify-content:center会将列表与中心对齐。

设置列数

。您可以设置*-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;

}

Centered CSS3 multi-column layout

abcd
b
cdefg
d

答案 1 :(得分：7)

实际上，我认为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;

abcd
b

cdefg
d

＆＃13;＆＃13;＆＃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;

abcd
b
cdefg
d

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：3)

可以使用@supports规则检查Firefox

由于其他浏览器不支持-moz-column-count，因此不会受到影响

FF可以在该块内获得单独的解决方案。

＆＃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;

asadf
b
cadsfa
d

＆＃13;＆＃13;＆＃13;

答案 3 :(得分：3)

您应该在ul上使用

，因为列数不能在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;＆＃13;＆＃13;