0

我正在制作一个网站，并完成了主页（页眉、正文和页脚）。我为我的第二页开始了一个新文档。我将标题的代码从主页复制并粘贴到第二页，并且运行良好。但是当我对页脚执行相同操作时，导致页脚向左对齐而不是居中对齐。所有的代码和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>

您需要向下滚动才能查看页脚图像

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

在这里 演示 全屏演示

这是它的样子

演示2 全屏演示2

4

2 回答 2

1

我想也许标签没有关闭。但这是我添加的：

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

它似乎正在工作。小提琴

于 2013-06-24T16:44:24.013 回答
0

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

"还修复了 Demo1 中的 img 标签，你在定义宽度时错过了一个。

于 2013-06-24T16:44:57.977 回答