在Firefox中使用列时，右浮动元素消失

Question

我正在使用具有列数和列间距属性的ol元素来显示2列中的列表。每个列表项都有一个向右浮动的span元素，对于某些项目（例如下图中的3和4）不会显示。

Firefox column floated right issue image

＆＃13;

＆＃13;

.list {
  column-count: 2;
  column-gap:60px;
}

.close {
  float: right;
}

＆＃13;

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>

＆＃13;

＆＃13;

＆＃13;

我使用的是Firefox Quantum 58.0.2（64位），并尝试过最新的Chrome，Edge和Opera。

Answer 1

将Firefox降级到版本55.0并解决了问题。我在这里向mozilla报告了这个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1441048

Answer 2

对我来说，这似乎是一个错误。我可以想象至少有两个修复：

如果您有奇数列表项

，请添加列表项

这是一个hacky解决方法：

.list {
  column-count: 2;
  column-gap: 60px;
}

.list > li:last-child {
  visibility: hidden;
}

.close {
  float: right;
}

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
  <li></li>
</ol>

使用绝对定位

我认为，这是更好的解决方案：

.list {
  column-count: 2;
  column-gap:60px;
}

.list > li {
  position:relative;
}

.close {
  position: absolute;
  right: 0;
}

<ol class="list">
  <li>Test 1
    <span class="close">&times;</span>
  </li>
  <li>Test 2
    <span class="close">&times;</span>
  </li>
  <li>Test 3
    <span class="close">&times;</span>
  </li>
  <li>Test 4
    <span class="close">&times;</span>
  </li>
  <li>Test 5
    <span class="close">&times;</span>
  </li>
</ol>