css - 对齐输入右下角的按钮

Question

这就是我要的：

我尝试了这种方法但没有运气（从这里获得）。这是不想要的结果：

我想它不起作用，因为我使用的是 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/。