Как правильно плавать элементы и при этом сохранять 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;}

css user-experience tabindex css-float
person NoBBy    schedule 30.05.2011    source источник
comment
stackoverflow.com/a/4224500/470749 был полезен для меня (оберните свои элементы в содержащий элемент и поместите его в вместо этого правильно).   -  person Ryan    schedule 07.01.2021

Ответы (2)


arrow_upward
6
arrow_downward

Добавь это:

.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;}
person clairesuzy    schedule 30.05.2011

arrow_upward
13
arrow_downward

Это немного хак, но вы можете обернуть кнопки 3 и 4 в div и поместить div вправо. Это сохранит порядок кнопок.

person Kalessin    schedule 30.05.2011
comment
я бы так и сделал, если нет лучшего варианта - person NoBBy; 30.05.2011
comment
Это самое чистое и практичное решение. Принятый ответ работает только тогда, когда вы знаете ширину элементов. - person Joe Maffei; 30.06.2016