15

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

2 回答 2

14

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

于 2011-05-30T07:57:53.267 回答
6

添加这个：

.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;}
于 2011-05-30T08:09:21.097 回答