浮動小数点：右の要素がFirefoxの次の行にプッシュされる

Question

divに4つの要素があります。それらのうち、私は最後の要素が極端な権利にプッシュされることを望みます。私は浮動小数点を使用しています：右の最後の要素です。これにより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私はいくつかの提案があります。すべての要素にwidth財産の

1）を使用し（幅さんエレメント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 
}