css - CSS中央の要素の横にある要素をフロートします

Question

ページの中央にテーブルがあります

http://jsfiddle.net/YrBnd/3/

例のテーブルのすぐ左にボタンを配置することは可能ですか？

この非常に熟練した図面はあなたにより良い絵を与えるはずです：

|                  |
|    $$center      |
|                  |

$$は、中心から外して配置したいボタンです。

Answer 1

あなたのjsfiddleに基づいて、このアプローチを試してください：

HTML

<span>Center body text<button>Click</button></span>

CSS

span {
    display: block;
    width: 200px;
    margin: 0 auto;
    position: relative;
}
button {
    position: absolute;
    right: 100%;
}

http://jsfiddle.net/YrBnd/4/

ボタンは、右端からスパン要素の幅の 100% まで絶対に配置されます。

Answer 2

.center
{
   width:250px;
   margin:0px auto 0px auto;
}
.center input[type="button"], div
{
   float:left;
}

<div class="center">
   <input type="button" name="submit" value="$$" />
   <div> center text </div>
</div>

Answer 3

これはjqueryで解決できます。

ページの読み込み時に、テーブルの開始位置を確認してから、このテーブルの左側にボタンを追加できます

例えば

$(function(){
  //Get the left position of the table
  var leftPosition =  $("table").offset().left;
  //Get the top position of the table
  var topPosition=  $("table").offset().top;

  //Now add the left position of the table minus the button width and a spacing of 5
  var leftButtonPosition = leftPosition -  $("myButton).width() + 5;

 $("myButton).offset({ top: topPosition + 5 , left: leftButtonPosition });
});

ほらほら;）