html – 组合“列计数”和“显示:表”在Firefox中呈现单列

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了html – 组合“列计数”和“显示:表”在Firefox中呈现单列脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
我试图在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获得两列,或者如何正确地列出列表,使其在所有浏览器中都可以使用。

实际上,我认为Chrome和ie是错误的。他们会给你想要的,但是他们不应该像FF一样。

在你的代码中,你会说’split-div-in-2-columns,但是基本上你只需要一个ul。当你将ul分成两部分(见片段),那么FF就像预期一样工作,和CHB和ie BTW一样。

如果我创建了你的代码,我实际上只会想到一个列,即一个ul的li(或一个p的p,一个span的等等)。第二个ul将是第二列(第二个div …等)。所以我的结论是Chrome和ie搞砸了。

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

以下是更正后的代码:

div {
  -webkit-column-count: 2; /* Chrome,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>

– 更新演示代码 –

另外一些演示代码片段如何使用它没有一个表。只需将你的代码删除表的东西,并将列计数移动到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,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>

总结

以上是脚本之家为你收集整理的html – 组合“列计数”和“显示:表”在Firefox中呈现单列全部内容,希望文章能够帮你解决html – 组合“列计数”和“显示:表”在Firefox中呈现单列所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签:firefox