使用“<select>”时，Div表现不正确;使用“</select> <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元素以“新行”开头，只需向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;
}