css - 将标签与按钮对齐

Question

用小提琴更容易解释我需要什么：http: //jsfiddle.net/mZrYG/1/

如您所见，当输出屏幕完全展开时，登录按钮位于标签下方的行上。我试图让复选框左对齐，按钮右对齐在同一行。我的css有什么问题？

为了繁荣：

<div class="row">
   <div class="span3">
      <form class="signin" method="POST">
         <input type="text" placeholder="Username" name="username" />
         <input type="password" placeholder="Password" name="password" />
         <label class="checkbox">
         <input type="checkbox" name="form[remember]" /> Remember me
         </label>
         <button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button>
      </form>
   </div>
</div>​

Answer 1

演示

你好现在习惯display:inline-block在你的标签

像这样

label {
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: top;
}

Answer 2

最左边的元素应该先写，所以我把它重新排列为 1. 复选框/记住我 2. 输入框 3. 登录

您还必须确保所有框的宽度加起来小于 span12，因此我在上面的每个 1/2/3 项中添加了 span 类。

  <form class="signin" method="POST">
      <label class="checkbox span2">
     <input type="checkbox" name="form[remember]" /> Remember me
     </label>
     <input type="text" placeholder="Username" name="username" class="span3"/>
     <input type="password" placeholder="Password" name="password" class="span3"/>
      <button class="btn btn-mini btn-primary" type="submit">Sign in</button>
  </form>

​​​​​​​​​​​​​​​</p>

因此，上面的框现在位于同一行，但您必须在每个 css 类（即复选框和 2 个输入）中使用“line-height”参数，以确保它们完全对齐。

Answer 3

你可以这样做float:left;输入，标签，按钮

或添加类fleft

.fleft{
   float:left;
}

或者如果你只想要这个

比尝试

<label style="float:left;" class="checkbox">

Answer 4

选项1：

<label class="checkbox">
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary" type="submit">Sign in</button>
</label>

选项 2：

<label class="checkbox">
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button>
</label>