為什麼「float: right」會顛倒 HTML 中的 Span 順序？

Float：右反轉Span 順序

給定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>

應用程式> >

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

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

導致瀏覽器中出現意外的顯示順序，跨度顯示為“導入匯出設定”，而不是HTML 來源中的順序。

解決方案

要在不修改 HTML 的情況下解決此問題，可以調整 CSS。一種方法是反轉右側浮動元素的順序：

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

此解決方案保留左側浮動標籤元素，同時反轉右側浮動按鈕的順序，從而獲得所需的顯示順序。

以上是為什麼「float: right」會顛倒 HTML 中的 Span 順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！