html – 组合“列计数”和“显示:表”在Firefox中呈现单列
发布时间:2020-12-14 22:21:19 所属栏目:资源 来源:网络整理
导读:我试图在Firefox(我使用的是40.0.3)中解决了一个问题,其中使用-moz-column-count和display:table使列表显示为一列。这是我的例子和 jsfiddle: div { -webkit-column-count: 2; /* Chrome,Safari,Opera */ -moz-column-count: 2; /* Firefox */ column-cou
我试图在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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |