问题
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">×</span>
</li>
<li>Test 2
<span class="close">×</span>
</li>
<li>Test 3
<span class="close">×</span>
</li>
<li>Test 4
<span class="close">×</span>
</li>
<li>Test 5
<span class="close">×</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">×</span>
</li>
<li>Test 2
<span class="close">×</span>
</li>
<li>Test 3
<span class="close">×</span>
</li>
<li>Test 4
<span class="close">×</span>
</li>
<li>Test 5
<span class="close">×</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">×</span>
</li>
<li>Test 2
<span class="close">×</span>
</li>
<li>Test 3
<span class="close">×</span>
</li>
<li>Test 4
<span class="close">×</span>
</li>
<li>Test 5
<span class="close">×</span>
</li>
</ol>
来源:https://stackoverflow.com/questions/48979009/right-floated-element-disappears-when-using-columns-in-firefox