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 に答える