要了解我的问题,请访问this link。这里注意文本框和按钮是相互对齐的,但是当你单击SlideUp按钮然后SlideDown时它们的对齐就会中断
这是我的代码
$(document).ready(function(){
$("#btSlideDown").click(function(){
$("#txt").slideDown("slow");
$("#b2").slideDown("slow");
});
$("#btSlideUp").click(function(){
$("#txt").slideUp("slow");
$("#b2").slideUp("slow");
});
});
请解释为什么会这样?
答案 0 :(得分:1)
如果您向CSS添加垂直对齐样式,似乎可以解决问题,类似于:
#panel > input{
vertical-align: middle;
}
DEMO - 应用垂直对齐
我的猜测是浏览器正在尝试尽可能最好地计算出对齐方式,并且因为输入是单独的元素,所以它无法完全正确。
通过指定vertical-align
虽然您告诉浏览器您想要它,但浏览器不必猜测。我只是在猜测。
答案 1 :(得分:0)
我尚未确定导致该问题的原因,但我确实有其他解决方案:
尝试将这些元素包装在div
中,并在包装器上调用slideDown
或slideUp
。
<div id="panel">
<div id='wrapper'>
<input id="txt" type="text" />
<input id="b2" type="button" value="OK"/>
</div>
</div>
$(document).ready(function(){
$("#btSlideDown").click(function(){
$("#wrapper").slideDown('slow');
});
$("#btSlideUp").click(function(){
$("#wrapper").slideUp('slow');
});
});