浮动：正确的元素推到Firefox中的下一行

Question

我有一个div中的四个元素。其中，我希望最后一个元素被推到最右边。我正在使用float：right作为最后一个元素。这导致最后一个元素被推到Firefox的下一行的右端。对于其他浏览器，渲染非常好。我无法在HTML中进行任何修改。 这怎么解决？

Answer 1

检查此fiddlehere。这在Firefox中正常工作。也许你可以调整CSS。

.container { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: green; 
 
} 
 

 
.el { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    border: thin solid black; 
 
} 
 

 
.element4 { 
 
    float: right; 
 
}

<div class="container"> 
 
    <div class="el"></div> 
 
    <div class="el"></div> 
 
    <div class="el"></div> 
 
    <div class="el element4"></div> 
 
</div>

Answer 2

如果您共享您的代码，我可以帮你Better.But我有几个建议：

1）使用width物业的所有元素（宽度的部件1 +宽的元素2 +宽的元素3 +宽的元素4 < = 100％）

2）使用box-sizing:border-box财产来所有元素。

3）使用float:left' For the first three elements and float：right`为最后一个元素。

这是例子：

.el1, .el2, .el3, .el4 { 
 
    width: 20%; 
 
    box-sizing: border-box; 
 
    border: 1px solid orange; 
 
    background-color: #000; 
 
    color: orange; 
 
    float: left; 
 
} 
 

 
.el4 { 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="el1">Element1</div> 
 
    <div class="el2">Element2</div> 
 
    <div class="el3">Element3</div> 
 
    <div class="el4">Element4</div> 
 
</div>

这为我工作很好，我希望你工作！

Answer 3

这是Firefox本身的错误。

https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我一直在使用Firefox的具体样式固定它：

@-moz-document url-prefix() { 
//your styles here 
}