CSS帮助 - 浮动右忽略保证金

Question

我有一个表单中的两个按钮，我想要一个向左（前一个）和另一个向右（下一个/提交）。问题是当我隐藏了前一个按钮（当我在表单的第一个选项卡上时），下一个/提交按钮悬停在内容之外。当前一个按钮被隐藏时，如何让按钮按我想要的方式定位？

ASP.NET：

<div id="formContainer" style="padding:20px; margin-top:50px; margin-bottom:20px; width:600px; margin-left:auto; margin-right:auto; border:solid black 1px;background-color:#c6c6c6"> 
     <div id="recipeForm1"> 
       <!-- OMMITTED FOR Length Purposes --> 
     </div> 
     <div id="recipeForm2"> 
      <!-- OMMITTED FOR Length Purposes --> 
      </table> 
     </div> 
     <div id="recipeForm3"> 
      directions 
     </div> 
     <div id="recipeForm4"> 
      Nutrition 
     </div> 

     <div id="recipeForm5"> 
      review 
     </div> 
     <div id="buttons"style="margin-left:auto; margin-right:auto; padding-top:30px;"> 
      <input id="btnPrevious" type="button" value="Previous" /> 
      <input id="btnNext" type="button" value="Next" style=" float:right;" /> 
     </div> 

    </div> 

使用jQuery .show和.hide对配方的div和按钮的需要。当我在recipeform1以前的按钮是失踪，形式如下：

我希望它看起来像这样（减去以前出现）：

Answer 1

使用clearfix解决方案...

#buttons { 
    overflow: hidden; 
} 

这是因为您已漂浮在下一个对接所以当先前的被隐藏时，其父元素折叠（元素不会展开以默认包含浮动元素）。