0

私はウェブサイトを作っていて、メインページ (ヘッダー、ボディ、フッター) を完成させました。2 ページ目の新しいドキュメントを開始しました。ヘッダーのコードをメイン ページから 2 番目のページにコピー アンド ペーストしたところ、問題なく動作しました。しかし、フッターに対して同じことを行ったところ、フッターが中央ではなく左に配置されました。すべてのコードと 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

You do not have the info_body ul element in the second demo. Adding that should center the footer.

Also fix the img tag in Demo1, you missed out a " when defining the width.

于 2013-06-24T16:44:57.977 に答える