css - 入力の右下にボタンを揃える

Question

これは私が欲しいものです:

私はこのアプローチを試してみましたが、うまくいきませんでした（hereから取得）。これは望ましくない結果です:

Twitter Bootstrap と span を使用しているため、機能しないと思います。

<div id=containerOfButtonAndInput class="container span12"> 

しかし、どうすればそれを行うことができますか？

Answer 1

なぜCSSを使わないのですか？次のようなものを使用します。

<div id="outer-container">
  <div id="container">
    <div id="label">Your Label<input id="input" /></div>
    <div style="height:10px">&nbsp;</div>
    <div id="button">Your Button</div>
  </div>
</div>

CSS:

#outer-container{
    padding: 20px 20px 20px 20px;
    width:500px;
    height:200px;
    background-color:#eee;
}
#container{
    width:300px;
    height:100px;
    margin: 0 auto;
    background-color:#ccc;
}
#label{
    float:right;
}
#button{
    float:right;
}

ここには魔法はありません。通常のフォーマットだけです。div タグを恐れないでください。マスクの周りにもっと容器が必要かもしれません。

フィドルを参照してください: http://jsfiddle.net/Ahg5c/1/。