CSS3列：Firefox和Chrome不同的行为

我有一个无序列表中的网站基本上是喜欢CSS3列：Firefox和Chrome不同的行为

 <ul class="subnav-links"> 
     <li class=""> 
      <a href="/de/t/new">New In</a> 
     </li> 
     <li class=""> 
      <a href="/de/t/sale">Sale</a> 
     </li> 
     <li class=""> 
      <a href="/de/pages/best_looks">Looks</a> 
     </li> 
     .... more lis omitted 
    </ul>

和css：

.subnav-links { 
    -webkit-columns: 8 auto; /* Chrome, Safari, Opera */ 
    -moz-columns: 8 auto; /* Firefox */ 
    columns: 8 auto; 
}

在此website铬正确地显示在8列的列表项但Firefox只显示1列。

这是为什么？我该如何解决它？

P.S.我还在div.subnav-columns中包装了subnav-ul，并使用columns属性对div进行了样式设置，但Firefox始终只显示一列。

来源

2016-09-20 StandardNerd

在网站 – dippas

中没有'subnav-colunms'是的，这是尝试使用columns属性对div进行样式设计而不是ul，但两者都不在Firefox中工作，因此我将其删除。 – StandardNerd

好吧，我发现它。我在样式表中嵌套了一个错误的嵌套@-moz-document url-prefix()。

来源

2016-09-22 13:09:05 StandardNerd

Hav'nt您尝试使用这一点，并把它应用到CSS：

.subnav-links li { 
    display:inline-block; width:100% 
}

来源

2016-09-21 08:00:51 SaurabhLP

是的，有了这个列表项是水平排列行，但我希望列表项被垂直堆叠在8列。 – StandardNerd

表示您希望所有列表项目的高度相同。哪些可以使列堆叠？ – SaurabhLP

我不确定我是否正确理解您最后的评论。我几分钟前在评论中提到的是列表项目的排序顺序。使用CSS3列属性，排序顺序是填充列（垂直堆叠）后列中的列表项。在您的第一条评论中使用您的方法时，列表项将在行后填充行。 – StandardNerd

CSS3列：Firefox和Chrome不同的行为

回答

相关问题