Bagaimana untuk Mengekalkan Susunan HTML Apabila Menggunakan `float: right` untuk Span?

Terbalikan Span Order dengan Float:kanan

Dalam HTML yang disediakan, span dengan kelas "butang" digayakan dengan "float: right ," menyebabkan mereka dipaparkan dalam susunan terbalik daripada struktur HTML. Bolehkah CSS diubah suai untuk mengekalkan susunan HTML?

Untuk menangani isu ini, terdapat dua penyelesaian umum yang memanipulasi kedudukan menggunakan CSS:

Pilihan 1: Terbalikkan Susunan HTML

Daripada mengapungkan elemen rentang secara langsung, bungkusnya dalam elemen yang mengandungi dan apungkan itu ke kanan. Contohnya:

<code class="html"><div id="buttons">
    <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>

#buttons {
    float: right;
}</code>

Dalam kes ini, div "butang" dengan sifat "float: right" merangkumi rentang butang, membolehkannya dipaparkan dalam susunan yang betul.

Pilihan 2: Kekalkan Susunan HTML

Jika mengekalkan susunan HTML semasa adalah penting, tambahkan peraturan CSS untuk menyatakan secara eksplisit susunan rentang terapung. Gunakan sifat "clear" untuk memecahkan aliran elemen terapung dan memaksanya untuk dipaparkan dalam susunan HTML asal:

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

Sifat "clear: right" memastikan bahawa mana-mana elemen berikut akan bermula di bawah terapung menjangkau, mengekalkan susunan HTML dengan berkesan sambil menampung penjajaran kanan.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Susunan HTML Apabila Menggunakan `float: right` untuk Span?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!