html - 使用“<select>”时，Div 行为不正确；使用“<input>”时工作正常

Question

我的代码如http://jsfiddle.net/Lijo/PJcZQ/所示。它有两个具有相似内容“GROUP1”和“GROUP2”的div——唯一的区别如下

第 1 组

  <div class="secondTextBox">
  <select name="ctl00$detailContentPlaceholder$ddlStatus" id="detailContentPlaceholder_ddlStatus" class="dropdownItem" style="width: 120px;">
  </select>
  </div>

第 2 组

 <div class="secondTextBox">
 <input name="ctl00$detailContentPlaceholder$txtVal2" type="text" id="detailContentPlaceholder_txtVal2" style="width: 120px;" />
 </div>

CSS

.searchValuesDiv
{
padding: 10px 0 0 20px;
margin:20px 0 20px 0px;
border:1px solid Cyan;
overflow:auto;
}

第 1 组的行为与预期不符——包含按钮的 div 从错误的位置开始。

注意：从 jsFiddle 查看时，此问题不可重现。这可以在使用该代码创建 HTML 页面时重现。

1. 为什么会这样？[你能解释为什么当我使用“输入”元素时它没有问题吗？]
2. 我们怎样才能纠正它？

Answer 1

你似乎在使用花车。如果您希望.btnSearchDiv元素从“新行”开始，只需将 a 添加overflow: hidden;到.searchLine元素中。没有它，这些元素将被折叠，因为它们包含浮动元素。

Answer 2

..中缺少一个浮点数.searchLine。我希望它能解决您的问题

将css更改为：

.searchLine
{    
    float:left;
    width:auto;
    min-width:700px;
    height:auto;
    margin:1px 1px 1px 1px;
    padding: 0 0 0 0px;
}

或者

.searchLine
{    
    clear:both;
    width:auto;
    min-width:700px;
    height:auto;
    margin:1px 1px 1px 1px;
    padding: 0 0 0 0px;
}