Question

我的页脚中有4列。

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

但是使用这个slideToggle，Im with，当我点击“查看更多链接”时，我的页脚会上升一点然后再下来。

使用我的列div（#col）解决了这个问题，max-height：227px;和最小高度：227px; proprierties。

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

你知道我怎么解决这个问题？我试图用绝对位置或固定高度的容器“玩”，但我不能在不同的浏览器和分辨率中获得相同的结果。

我的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;
}

Answer 1

我认为如果您希望列容器中的项目与容器本身的底部保持一致的距离，那么您需要的是：

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

Answer 2

实现此目的的一种方法是使用last-child选择器。然后，您不需要将类添加到html中的最后一个元素。

#footer1 ul li:last-child
{
    margin-bottom: 10px;
}

总是比我上一个列表项下方10px的保证金底部“查看更多链接”

2 个答案: