如何使元素向右浮动并仍然保持 tabindex？

Question

这是一个小提琴： http://jsfiddle.net/5s7vv/

我想做的是有 2 个按钮向左浮动，向右浮动 2 个，就像示例一样，但 button_4 应该是最右边的元素。但是，我无法仅通过简单的浮动权利来实现这一点。我应该更改它们在标记中的顺序，但这会破坏用户体验（按钮之间的选项卡顺序错误），这实际上导致了我的问题。

是否可以以正确的顺序向右浮动两个按钮，并仍然保留其选项卡索引，当然没有额外的标记。 （将它们包装在 div 中很容易，但我真的想避免这种情况）。

我知道 tabindex 属性，但据我所知它没有得到很好的支持...

---

HTML 代码：

CSS：

#container{
    width: 200px;    
}

#container a{
    width: 20px;
    height: 20px;
}

.button_1, .button_2{
     float: left;   
}

.button_3, .button_4{
     float: right;  
}

.button_1{background-color: blue;}
.button_2{background-color: red;}
.button_3{background-color: green;}
.button_4{background-color: yellow;}

Answer 1

这有点麻烦，但您可以将按钮 3 和 4 包装在 div 中并使 div 右浮动。这将使按钮顺序保持不变。

Answer 2

添加这个：

.button_3 {margin-right: 20px;}
.button_4 {margin-right: -40px;}

这使得它们（3和4}“交换”位置

或position：relative可能也会起作用

更新：使用相对位置似乎在IE中更稳定..

.button_3, .button_4{
    float: right; 
    position: relative; 
}

.button_3 {left: -20px;}
.button_4 {left: 20px;}