Right floated element disappears when using columns in Firefox

折月煮酒 提交于 2019-12-10 17:47:51

问题


I am using an ol element with column-count and column-gap properties to display the list in 2 columns. Each list item has a span element floated right, which does not get displayed for some items such as 3 and 4 in the image below.

Firefox column floated right issue image

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

.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>
</ol>

I am using Firefox Quantum 58.0.2 (64bit), and have tried latest Chrome, Edge, and Opera which works fine.


回答1:


Downgraded Firefox back to version 55.0 and the problem was fixed. I reported the bug to mozilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=1441048




回答2:


For me, it seems to be a bug. I can imagine at least two fixes:

Add a list item if you have an odd number of list items

This is a hacky workaround:

.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>

Use absolute positioning

I think, this is the better solution:

.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>


来源:https://stackoverflow.com/questions/48979009/right-floated-element-disappears-when-using-columns-in-firefox

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!