-1

現在、ウェブサイトのフッターに問題があります。

100% サイズ (通常サイズ) で作業すると、フッターがうまく配置されます。ただし、サイズを変更すると、完全にずれて左側に配置されます。中央に配置する必要があります。

スクリーンショット:

フッターのずれ

関連する CSS:

/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
    clear: left;
    width: 100%;
    vertical-align: top;
    background-color: #252B76;
    text-align: center;
    color: #FFFFFF;
    margin-top: 30px;
/*  padding: 5px;*/
}

#footerUpper ul {
    padding: 0;
    margin: 25px 0px;
    list-style: none;
}

#footerUpper li {
    display: inline;
    padding: 0 52px;
    font-size: 14px;
    font-weight: bold;
}

#footerUpper li a {
    text-decoration: none;
    color: #FFFFFF;
}

/* Main part of the footer */
#footer {
    float: left;
    width: 100%;
    color: #252B76;
    background-color: #89B0F1;
    padding: 5px;
}

/* Table within the footer */
#footerTable {
    width: 980px;
    margin-left: 150px;
}

ありがとう。

4

3 に答える 3

2

コードや実際に動作する例を見ないと、何が問題なのかを理解するのは困難です。

しかし、解決策は、内部コンテンツに静的な幅を持たせることかもしれないと思います。たとえば、「フッターテーブル」であると思われる、それ自体がずれているコンテンツ-「マージン：0オート」を適用して中央に配置しますそれを整列させます。これは、親が 100% 幅であると仮定しています。また、それに適用される他のマージン ルールをすべて削除します。

于 2013-06-11T11:04:47.340 に答える
1

これは、フッターを左にフロートさせているためで、中央に配置されたフッターのコンテナーがありません。次のいずれかを実行できます。

  • を削除float: leftし、代わりに and を実行しmargin-left: auto;ますmargin-right: auto;
  • フッター用のコンテナーを作成し (すべてを中央に配置する場合はレイアウト全体を配置することをお勧めします)、 と を使用してコンテナーを中央に配置しますmargin-left: auto;。margin-right: auto;

もちろん、ブロック要素を中央に配置する方法は他にもありますが、これらが最も効果的であり、推奨されます。

于 2013-06-11T11:05:36.537 に答える
0

フッターをフローティングする理由がないので（そう言う）：

次のスタイルを削除します。

float: left;
width: 100%;

次に、表が中央に配置されるように、次のスタイルを追加します。

text-align:center;

また、ズームに関係なく、フッターがページ幅まで伸びていることがわかります。

于 2013-06-11T11:06:48.567 に答える