2012-02-24 19 views
1

を使用してdivの内側のボタン:ポジショニングとしなければならないポジショニング私はいくつかのhtmlコード、持っているCSS

<div class="ui-tabs-panel"> 
    <div class="dataTables_wrapper"> 
     <div> 
      <button>Add Whatever</button> 
     </div> 
    </div> 
</div> 

適用されるスタイルは、以下のとおりです。

ui-tabs-panel { 
    display: block; 
} 
dataTables_wrapper: { 
    clear: both, 
    position: relative; 
} 
my_button div: ? 
my_button: ? 

外のdivはjQueryのですタブパネル。真ん中のdivは、jQueryのデータテーブルを削除したものです。私は、私のボタンを右揃えにし、タブの枠内にしたい。私はいくつか試しました。ボタン自体にこれらのスタイルを適用する:
1. float:rightはタブの境界線の外側では右揃えです。
2. position: absoluteも同様にタブ境界の外に出ます。
3. right: -91%は、画面が最大になったときに大きく見えますが、サイズを小さくするとボタンの右端が切り取られます。 (ボタンの幅は一定です)
4. margin-left: 91%と同じことをします。

float: rightをコンテナdivに適用しようとしましたが、それでもタブパネルの外側に貼り付けています。

私はresizeイベントを処理し、右の属性のパーセンテージ値を再計算することができますが、ブロックの周りを回って次のドアに行くように私を襲います。 cssでこれを行う正しい方法は何ですか?

+0

よりもむしろ記述をコンテナに隠さをあなたのCSS、なぜ実際のCSSを含めるだけではない? –

+0

例のページまたはjsFiddleが大きく役立ちます。 – j08691

答えて

12

あなたはフロートを使用したい場合は、オーバーフロー適用されます:あなたがポジショニングを使用したい場合は位置適用、その後、

.dataTables_wrapper{ 
    overflow:hidden; 
} 
button{ 
    float:right; 
} 

:コンテナからの相対:

.dataTables_wrapper{ 
    position:relative; 
} 
button{ 
    position:absolute; right:0; 
} 
+0

Makcさん、ありがとうございました。私はoverflow:ui-tabs-panelタブに隠された追加し、それはトリックでした。もう1つは内部にもデータテーブルを持っているので、おそらくそれがうまくいかなかったのです。 – BobRodes

+1

http://colinaarts.com/articles/the-magic-of-overflow-hidden/フロートやオーバーフローの隠された、良いことについての詳細を学ぶ! – Makc

+0

もう1つのSOスレッド。「そのページにあるすべてのボタンにCSSを適用するにはどうすればいいですか?」http://stackoverflow.com/questions/3540380/how-can-i-apply-css-on-all-buttonsそのページに存在するものは、IDまたはスタイルをボタンに割り当てる必要なく、より多様なアプローチを提供します。 –

関連する問題