Mengapakah `float: right` Membalikkan Susunan Span dalam HTML?

Apung: Susunan Rentang Pembalikan Kanan

Memandangkan penanda 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>

menggunakan CSS:

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

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

menghasilkan susunan paparan yang tidak dijangka dalam penyemak imbas, dengan rentang dipaparkan sebagai "Tetapan Import Eksport" dan bukannya susunan dalam sumber HTML.

Penyelesaian

Untuk menyelesaikan isu ini tanpa mengubah suai HTML, CSS boleh dilaraskan. Satu pendekatan ialah membalikkan susunan unsur terapung yang betul:

<code class="css">span.button:nth-child(1) {
    float: right;
}

span.button:nth-child(2) {
    float: right;
    margin-right: 5px;
}

span.button:nth-child(3) {
    float: right;
    margin-right: 10px;
}

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

Penyelesaian ini mengekalkan elemen label terapung kiri sambil membalikkan susunan butang terapung kanan, menghasilkan susunan paparan yang diingini.

Atas ialah kandungan terperinci Mengapakah `float: right` Membalikkan Susunan Span dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!