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

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

我想要做的是左边有两个按钮，右边有两个按钮，就像示例一样，但是 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;}

2641

2018-05-30 07:49

起源

答案:

添加这个：

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

2018-05-30 08:09

工作得很好，谢谢！ - NoBBy

答案:

添加这个：

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

2018-05-30 08:09

工作得很好，谢谢！ - NoBBy

这有点像黑客攻击，但你可以将div中的按钮3和4包装起来并右移浮动div。这将保持按钮顺序完好无损。

2018-05-30 07:57

如果没有更好的选择，我会这样做 - NoBBy

这是最干净，最实用的解决方案。只有当您知道元素的宽度时，才能使用接受的答案。 - Joe Maffei

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

答案:

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

答案:

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

热门问题

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