css - 如何正确 float 元素并仍然保留 tabindex？

Question

这是一个 fiddle :http://jsfiddle.net/5s7vv/

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

是否可以将两个按钮以正确的顺序向右浮动，并且仍然保持它们的标签索引，当然没有额外的标记。 (将它们包装在 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

这有点 hack，但您可以将按钮 3 和 4 包装在一个 div 中，然后右浮动该 div。这将使按钮顺序保持不变。