为什么'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>

应用 CSS：

<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中文网其他相关文章！