html - 在我的上一个列表元素“查看更多链接”下方始终将边距底距设置为10px

页脚中有4列。

我的右列有一些列表项，当我单击它时，我的最后一个列表项是“查看更多链接”。我使用jQuery slideToggle（）将第一个项目列表更改为其他列表。

但是，当我单击“查看更多链接”时，使用此slideToggle，我的页脚会先升高然后降低。

在我的列div（#col）中使用max-height：227px解决了此问题；和最低高度：227像素；属性。

我现在遇到的问题是，我总是希望我的上一个项目“查看更多链接”的边距始终只有10px，但是我在不同的浏览器和不同的分辨率下具有不同的边距。

你知道我该怎么解决吗？我试图用绝对位置或具有固定高度的容器“播放”，但在不同的浏览器和分辨率下，我无法获得相同的结果。

我的示例在这里：http://jsfiddle.net/vb63n9vg/4/

我的html：

<footer id="footer-container">
    <section id="footer1">
        <div id="col" class="col4" style="margin-right:0;">
            <h1>LINKS</h1>
            <ul id="list1">
                <li><a href="#"><span>Link 0</span></a></li>
                <li><a href="#"><span>Link 1</span></a></li>
                <li><a href="#"><span>Link 2</span></a></li>
                <li><a href="#"><span>Link 3</span></a></li>
                <li><a href="#"><span>Link 4</span></a></li>
                <li><a href="#" id="change_links1" class="toggle">see more links</a></li>
            </ul>
            <ul id="list2">
                <li><a href="#"><span>Link 0</span></a></li>
                <li><a href="#"><span>Link 1</span></a></li>
                <li><a href="#"><span>Link 2</span></a></li>
                <li><a href="#"><span>Link 3</span></a></li>
                <li><a href="#"><span>Link 4</span></a></li>
                <li><a href="#" id="change_links2" class="toggle">Ver mais Links</a></li>
            </ul>
        </div>
    </section>
    <section id="footer2-container">
        <div id="footer2">
            <p class="copyright">&copy; copyright</p>
        </div>
    </section>
</footer>

我的CSS：

*{margin:0; padding:0;}

#list2
{
    display:none;
}

#footer-container
{
    width:100%;
    height:auto;
    float:left;
    background:#ff9900;
    border-top:0;
}
#footer1
{
    width:1160px;
    margin:0 auto 0 auto;
}


#footer1 ul
{
    list-style:none;
}

#footer1 ul li
{
    margin:0 0 7px 0;
}

#footer1 ul li a
{
    text-decoration:none;
    color:#444;
    font-family: 'Open Sans', sans-serif;
    font-size:15px;
}

#footer1 ul li a:hover
{
    color:#fff;
}

#col
{
    float:left;
    margin-right:40px;
    margin:10px 53px 10px 0;
    width:250px;
    max-height:227px;
    min-height:227px;
}

#footer2-container
{
    width:100%;
    float:left;
    background:#ECECEA;
    border-top:0;
    border-top: 2px solid #e0e0e0;
}

#footer2
{
    width:1160px;
    margin:10px auto 10px auto;
    background:#ECECEA;
    height:40px;

}

#footer2 .copyright
{
    float:left;
    font-family: 'Open Sans', sans-serif;
    color:#2F3083;
    font-size:14px;
    line-height:40px;
}

最佳答案

我认为，如果要使列容器内的项目与容器本身的底部之间的距离保持一致，则需要：

#col
{
  padding: 0 0 10px 0;
}