当使用“< select>”时，div的行为不正确;在使用“< input>”时可以正常工作 [英] Div behave incorrectly when “<select>” is used; works fine when “<input>” is used
问题描述
我的代码如 http://jsfiddle.net/Lijo/PJcZQ/ 所示。它有两个具有相似内容GROUP1和GROUP2的div，唯一不同的是以下内容：b
$ b
GROUP 1
< div class =secondTextBox>
< / select>
< / div>
GROUP 2
< div class =secondTextBox>
< input name =ctl00 $ detailContentPlaceholder $ txtVal2type =textid =detailContentPlaceholder_txtVal2style =width：120px; />
< / div>
CSS
.searchValuesDiv
{
padding：10px 0 0 20px;
margin：20px 0 20px 0px;
border：1px solid Cyan;
溢出：auto;
$ / code> 第1组的行为并不像预期的那样 - 包含按钮的div从第错误的位置。
注意：从jsFiddle看这个问题是不可重现的。当使用该代码创建HTML页面时，可以将其复制。
- 它为什么表现如此？ [你可以解释为什么当我使用输入元素时它不是问题吗？]
- 我们如何改正它？
.searchLine 中有一个缺失的浮点数。我希望它能解决您的问题。 将css更改为：
.searchLine
{
向左飘浮;
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;
}
I have code as shown in http://jsfiddle.net/Lijo/PJcZQ/. It has tow divs with similar content "GROUP1" and "GROUP2" – only difference being the following
GROUP 1
<div class="secondTextBox">
<select name="ctl00$detailContentPlaceholder$ddlStatus" id="detailContentPlaceholder_ddlStatus" class="dropdownItem" style="width: 120px;">
</select>
</div>
GROUP 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;
}
Group 1 is not behaving as expected – the div containing the button starts from a wrong position.
Note: This issue is not reproducible while seeing from jsFiddle. This can be reproduced when a HTML page is created with that code.
- Why is it behaving so? [Can you explain why it was not a problem when I used "Input" element?]
- How can we correct it?
There is a missing float in the .searchLine.. I hope it fix your problem
Change the css to this:
.searchLine
{
float:left;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
or
.searchLine
{
clear:both;
width:auto;
min-width:700px;
height:auto;
margin:1px 1px 1px 1px;
padding: 0 0 0 0px;
}
这篇关于当使用“< select>”时，div的行为不正确;在使用“< input>”时可以正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
