流体布局中的页脚实现

Question

我在为我的网站实现页脚时遇到问题。
我在inner_footer 中获取了两个<ul> 列表，您可以在下面的代码中看到。但是当我放大时，div 元素中的<ul> 列表不可见。这似乎是一个浮动问题，但我无法弄清楚它有什么问题。

HTML：

<div class="grid_16">
    <div class="footer">
        <div class="inner_footer">
            <ul>
                <li>Some content</li>
            </ul>
        <div>
            <ul>
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li>Copyrights</li> 
            </ul>   
        </div>
    </div>
</div>

CSS：

.footer {
    height:105px;
    position:relative;
    top:0;
    width:100%;
  }
.inner_footer {
    background:url(../images/layout_img/nav.jpg) 0 center repeat-x;
    font-size:12px;
    border-radius:4px;
    position:relative;
    width:inherit;
    height:31px;
    margin:0 auto;
}
.inner_footer ul {
    margin:0;
}
.inner_footer ul li {
    color:#FFF;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer ul li a img {
    margin:2px 0 0 20px;
}
.inner_footer ul li a {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer div {
    float:right;
}
.inner_footer div ul li a {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}
.inner_footer div ul li {
    color:#FFF;
    float:left;
    font-family:calibri;
    font-size:13px;
    list-style-type:none;
    line-height:31px;
    text-decoration:none;
    padding:0 10px;
}

Answer 1

我相信问题出在您的 html 代码中。您忘记关闭 div 元素。代码应该变成：

<div class="grid_16">
    <div class="footer">
        <div class="inner_footer">
            <ul>
                <li>Some content</li>
            </ul>
        </div>
        <div>
            <ul>
                <li><a>Link 1</a></li>
                <li><a>Link 2</a></li>
                <li><a>Link 3</a></li>
                <li><a>Link 4</a></li>
                <li><a>Link 5</a></li>
                <li>Copyrights</li> 
            </ul>   
        </div>
    </div>
</div>