Как правильно перемещать элементы и при этом сохранять tabindex?

Question

Вот скрипка: http://jsfiddle.net/5s7vv/

Я хочу сделать так, чтобы 2 кнопки плавали влево и 2 вправо, как в примере, но button_4 должен быть самым правым элементом. Тем не менее, я не могу добиться этого просто с помощью простого float. Я должен изменить их порядок в разметке, но это нарушает взаимодействие с пользователем (вкладки между кнопками расположены в неправильном порядке), что фактически приводит к моему вопросу.

Можно ли перемещать обе кнопки вправо, в правильном порядке и при этом сохранять их индекс табуляции и, конечно, без дополнительной разметки. (завернуть их в 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;}