Question

我正在建立一个网站，我完成了主页面（页眉，正文和页脚）。我为第二页开了一个新文档。我将主页的标题代码复制并粘贴到第二页，并且完美无缺。但是当我为我的页脚做同样的事情时，它导致我的页脚向左对齐而不是对齐中心。所有代码和html都是一样的。我不知道问题是什么。我到处都在寻找但到目前为止没有运气。

CSS代码：

.end_text {
    width: 100%;
}

.bottom_left li {
    float:left;
    list-style: none;
}

.bottom_lmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_lmid li:first-child {
    margin-left: 100px;
}

.bottom_rmid li {
    float:left;
    list-style: none;
    margin-left: 10px;
    margin-top: 7px;
}

.bottom_rmid li:first-child {
    margin-left: 100px;
}

.bottom_right li {
    float:left;
    list-style: none;
    margin-left: auto;
    margin-top: 0px;
}

.bottom_right li:first-child {
    margin-left: 100px;
}

HTML代码：

<div id="footer">
    <div class="foot_bar">
        <img src="../../images/bestfoodservicesweb_24.jpg" width="862"/>
    </div>
  <div class="end_text">
            <ul class="bottom_left">
                <li><img src="../../images/bestfoodservicesweb_34.jpg" width="80" height="26"/></li>
           </ul>
            <ul class="bottom_lmid">
                <li><img src="../../images/bestfoodservicesweb_37.jpg" width="63" height="16"/></li>
                <li><a href="http://www.bestfoodservice.us/contact.aspx"><img src="../../images/bestfoodservicesweb_38.jpg" width="63" height="16"/></a></li>
                <li><img src="../../images/bestfoodservicesweb_39.jpg" width="99" height="16"/></li>
               </ul>
                <ul class="bottom_rmid">
                    <li><img src="../../images/bestfoodservicesweb_41.jpg" width="26" height="14"/></li>
                    <li><img src="../../images/bestfoodservicesweb_43.jpg" width="38" height="15"/></li>
                    </ul>
                    <ul class="bottom_right">
                        <li><a href="http://facebook.com"><img src="../../images/bestfoodservicesweb_27.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://twitter.com"><img src="../../images/bestfoodservicesweb_29.jpg" width="25" height="25"/></a></li>
                        <li><a href="http://linkedin.com"><img src="../../images/bestfoodservicesweb_31.jpg" width="25" height="25"/></a></li>
                    </ul>
            </ul>
        </div>
</div>

你需要向下滚动才能看到更多的图像

该演示展示了我的页脚如何看起来

Demo Here Full Screen Demo

这就是它的外观

Demo 2 Full Screen Demo 2

Answer 1

我想也许标签没有关闭。但这就是我补充的内容：

#footer{
   width: 860px;
   margin: 0 auto;
}

它似乎正在发挥作用。 Fiddle

Answer 2

第二个演示中没有info_body ul元素。添加它应该使页脚居中。

同样修复了Demo1中的img标记，在定义宽度时错过了"。

在另一个页面上重复的页脚html / css，但显示不同？

2 个答案: