Float: 스팬의 오른쪽 역순

HTML 마크업 제공:

    Bookmix Offline
    Settings
    Export
    Import

CSS 적용:

span.button {
    float: right;
}

span.label {
    margin-left: 30px;
}

는 HTML 소스의 순서 대신 범위가 "내보내기 설정 가져오기"로 표시되면서 브라우저에 예기치 않은 표시 순서가 발생합니다.

해결책

HTML을 수정하지 않고 이 문제를 해결하려면 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;
}

이 솔루션은 왼쪽 플로팅 레이블 요소를 유지하면서 오른쪽 플로팅 버튼의 순서를 반대로 하여 원하는 표시 순서를 얻습니다.