Question

我在为我的网站实现页脚时遇到问题我在<ul>中列出了两个inner_footer列表，如下面的代码所示。但是当我放大时，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>

流体布局中的页脚实现

1 个答案: