将标签与按钮对齐

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

的 Demo 的

您好已经习惯了标签

中的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>

所以上面的方框现在在同一行，但你必须在每个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>