如何使jQuery .slideToggle（）看起来滑动而不是崩溃？

Question

我在这里有一个例子：http://jsfiddle.net/v127pe9v/

幻灯片按照设计工作，但是如果你注意到它会在滑动框内的物品顶部折叠。我想知道是否有办法让幻灯片看起来都是统一的，因为它正在上下移动。

使用Javascript：

for i in range(1, d + 1):
    if (n%i == 0 and m%i == 0):
        divisors.append(i)
print(max(divisors))

HTML：

$(function(){
    $("button").click(function(){
        $(".slide-box").slideToggle("down");
    });
});

CSS：

<button>Click</button>
<div class="slide-box">
    <input placeholder="Enter text">
    <input placeholder="Another text">
    <input placeholder="Third text">
</div>

编辑：添加一张图片，希望能说明我的要求：

Answer 1

我相信你的问题是你在幻灯片盒上的填充。

http://jsfiddle.net/v127pe9v/1/

我把你的CSS改成了这个，我认为那是你想要的效果吗？

* { box-sizing: border-box; }
.slide-box {
    border: 1px solid black;
    display: none;
}
.slide-box input {
    display: block;
    margin: 10px;
    width: 100%;
}