「float: right」でインライン要素の順序が逆になるのはなぜですか?

Float:right スパンの順序を逆にする: CSS のジレンマ

インライン要素とフローティングを扱う場合、順序という予期せぬ問題が発生します。要素の数がブラウザ内で反転します。この観察は通常、float プロパティを賢明に使用することで確認されます。問題を説明するために、特定の状況を詳しく見てみましょう。

次の HTML 構造を考えてみましょう:

<code class="html"><div>
    <span class="label"><a href="/index/1">Bookmix Offline</a></span>
    <span class="button"><a href="/settings/">Settings</a></span>
    <span class="button"><a href="/export_all/">Export</a></span>
    <span class="button"><a href="/import/">Import</a></span>
</div></code>

次の CSS ルールを適用することにより、「ボタン」のスパンをフローティングにすることが目的です。右:

<code class="css">span.button {
    float:right;
}

span.label {
    margin-left: 30px;
}</code>

しかし、ブラウザでは、「ボタン」スパンが残念ながら逆の順序でレンダリングされ、意図した順序ではなく、予期せず「インポート/エクスポート設定」が表示されます。

CSS 修正: 柔軟性の採用

この複雑な問題を解決するために、CSS は多用途のアプローチを提供します。つまり、HTML 内のフロート要素の順序を逆にするか、包含要素を導入し、代わりにその要素をフロートします。どちらのソリューションも、既存の HTML 構造を変更することなく、順序逆転に効果的に対処します。

以上が「float: right」でインライン要素の順序が逆になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。