如何使元素正确浮动并仍然保持tabindex？

问题描述

| 这是一个小提琴：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;}

    

解决方法

        添加：

.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;}

    ,        这有点技巧，但是您可以将按钮3和4包裹在div中，然后右移div。这样可以使按钮顺序保持完整。