1

要了解我的问题，请访问此链接。此处注意文本框和按钮彼此对齐，但是当您单击 SlideUp 按钮然后 SlideDown 时，它们的对齐会被打乱

这是我的代码

$(document).ready(function(){
  $("#btSlideDown").click(function(){
    $("#txt").slideDown("slow");
    $("#b2").slideDown("slow");
  });
  $("#btSlideUp").click(function(){
    $("#txt").slideUp("slow");
    $("#b2").slideUp("slow");
  });
});

请解释为什么会这样？

4

2 回答 2

1

如果您在 CSS 中添加垂直对齐样式，它似乎可以解决问题，类似于以下内容：

#panel > input{
    vertical-align: middle;
}

演示- 应用垂直对齐

我的猜测是浏览器正在尝试尽可能地解决对齐问题，并且由于输入是单独的元素，因此它不能完全正确。

通过指定 avertical-align虽然你告诉浏览器你想要它，所以浏览器不必猜测。我只是在猜测。

于 2013-03-23T23:36:09.437 回答
0

我还没有确定是什么导致了这个问题，但我确实有一个替代解决方案：

尝试将这些元素包装在 a 中div并在包装器上调用slideDownor 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');
    });
});

小提琴

于 2013-03-23T23:17:20.323 回答