浮動：正確的元素推到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 
}