html - 向右浮动使我的专栏变得一团糟

Question

我创建了这个 html:col-sm-12 中有两个输入字段:在下一栏中我有一个提交按钮:

<div class="row">

   <div class="col-sm-12">       
     <input id="bis" class="form-control input-sm a" type="text" value="18-12-2013" placeholder="Bis" name="bis">
     </input>

     <input id="von" class="form-control input-sm a" type="text" value="02-12-2013" placeholder="Von" name="von">
     </input>
   </div>

   <div class="col-sm-12">
     <input class="btn btn-info btn-sm" type="submit" value="Filtern" style="float:right" name="commit">
     </input>
   </div>

</div>

并将这个额外的 css 添加到文本字段:

.a {width:100px; float:right}

因为我试图让输入字段彼此相邻，并且提交按钮位于其正下方的下一列中。

我现在的问题是提交按钮现在在两个输入字段旁边!虽然我想要它在下面!为什么？谢谢

fiddle :http://jsfiddle.net/52VtD/807/

Answer 1

那是因为你在 float 元素之后不是clear。

你有两个解决方案:

• 将此添加到您的 CSS:

   .col-sm-12 {
      clear:both;
   }
  

这里是this article这就是您需要了解的有关 float 用法的全部内容。

• 两个使用 display:inline-block 而不是 float:

   .a {
     display:inline-block;
   }
  

演示 http://jsfiddle.net/52VtD/814/