html - CSS3 列 : Firefox and Chrome different behavior

Question

我有一个无序列表的网站，本质上是这样的

      <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 Chrome 以 8 列正确显示列表项，但 Firefox 仅显示 1 列。

为什么会这样？我该如何解决？

附言我还将 subnav-ul 包装在 div.subnav-columns 中，并使用 columns 属性设置了 div 的样式，但 Firefox 一直只显示一列。

Answer 1

您是否尝试过使用它并将其应用于 CSS:

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