Chrome上JQuery slideTogle()动画中不需要的右侧空间

Question

我尝试用JQuery slideToggle（）编写一个简单的菜单。

<div class="menu-container">
    <button type="button" class="btn-nav">Navigation</button>
    <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

然而，我发现如果浮动按钮向左。Chrome上菜单的右侧有一个不需要的空间。

请访问http://jsfiddle.net/wenjiehu/agcnsako/在Chrome上进行此错误的演示。试着点击"导航"按钮，看看菜单右侧会发生什么。

实际上，这可以通过将.clearfix-div包装到float按钮来解决。看见http://jsfiddle.net/wenjiehu/agcnsako/2/。但由于某种原因，我无法包装这个额外的<div>。

有人能帮我找到另一个解决方案吗？

更新：

@Dipaks：填充和负利润正是我所需要的。无法删除它们。

Answer 1

注释减幅并删除.btn-nav类-它们不需要

.menu {
    display: none;
    position: relative;
    clear: both;
    /* margin-left: -20px;
    margin-right: -20px; 
    padding-left: 20px;
    padding-right: 20px;*/
}

检查更新的fiddle