css - div 没有正确并排对齐

Question

我的应用程序中并排放置了 3 个 div，在 div 之后，我保留了一个提交按钮。

如果我在日期选项中选择“今天”，这就是提交按钮的样子:

但如果我选择特定日期，则会发生以下情况:

这是代码的样子:

<div class="filters clearfix" style="float:left" id="sel_filters">
    <div class="fields">
       <div class="10">
          <!-- this is for the date option . it contains a label and select element-->
       </div>
       <div>
          <!-- label for start date and an input box -->
       </div>
       <div>
          <!-- label for end date and an input box -->
       </div>
       <div>
          <!-- label for adnetwork options "&nbsp;" and the select element -->
       </div>
       <input id="startdate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][startdate_hidden]">
        <input id="enddate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][enddate_hidden]">
        <input id="submit" class="stdButton" type="submit" onclick="return  updateAddetailsNetworkWiseReport();" value="Submit" name="submit">
    </div>
</div>

现在的样式:

.clearfix:after 
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div#sel_filters 
{
  margin-left: 10px;
  width: 754px;
}

div.filters div.fields 
{
  background: url("/img/bg_summary.gif") no-repeat scroll right bottom #FFFFFF;
  height: 38px;
  padding-right: 10px;
}
div#sel_filters div.fields div.l0 
{
  margin-left: 0;
}

我在最外层的 div 中添加了 style="float:left" ，但这个问题仍然存在。确切的解决方案是什么？

Answer 1

在我看来，在底部图像上，日期框旁边出现了两个图像，这导致元素对于包含的 div 来说太宽了。

尝试调整一些元素的大小，使它们缩小 20-30 像素或；使包含的分区宽度更大，这应该可以工作。