如何解决如何使元素正确浮动并仍然保持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。这样可以使按钮顺序保持完整。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。