对齐输入右下角的按钮

Question

这就是我想要的：

我试了this approach没有运气（来自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/。