0

このサイトのデスクトップ CSS の内部ラップが機能しない理由を知りたいです。

基本的にはinnerwrapに設定すればmargin:0 auto; and width: auto;問題ないのですが、フッターやメインの中央に配置されていませんdiv

現在設定されているようにinnerwrapを使用するとmargin:0 auto; and width:960px;、ウィンドウのサイズを少し変更した後、ページに水平スクロールバーが表示され、すべてのコンテンツが左側に押しつぶされ、白い背景が表示され始めます。

スクロールバーが表示されずにコンテンツが押しつぶされることなく、次のタブレットサイズのレイアウトにスムーズに移行する方法はありますか?

4

1 に答える 1

0

.innerwrap に適用するパディングのためにスクロールバーが表示されます

ボックス モデルに関するこの記事を読む

親要素に 100% の幅を適用するときに特定の要素の側面にパディングを使用することは推奨されません。これは、グループ全体に幅を追加するためです。ブラウザの幅を使用しているため、追加した余分なスペースを確認するためにスクロールバーが表示されます。

私の謙虚なアドバイスは、ブロック要素を中央に表示したい場合は、margin:auto可能な限りスタイルルールを適用し、フロートなしのブロック要素としても表示する必要があるということです.

これを削除します：

    .innerwrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
}

持っていて

.innerwrap {
    margin: auto;
    width: 960px;
}

ソーシャル アイコンに固定マージンを適用しているため、不適切な場所に表示されるため、中央揃えに固定マージンを使用しないでください。代わりにパーセンテージ幅を使用してください。

それらを整列させるために共通のクラスを使用したい場合があります

.social {
    background-position: center center;
    background-repeat: no-repeat;
    display: block !important;
    float: none;
    height: 150px;
    margin: auto;
    padding-top: 50px;
    width: 30% !important;
}

a.twittersocial と a.twittersocial:hover およびその他のソーシャル リンクについては、背景のプロパティを保持するだけです。

複数の要素に共通のスタイル ルールを適用する必要がある場合 (要素が多数ある場合)、決定されたクラスを作成し、可能な限り ID セレクターの使用を避け、代わりにクラス (.daclass) を使用します。

Firebugなどの Web インスペクターを使用して、スタイリング エラーを追跡します。

がんばれ開発者！

于 2013-02-02T04:06:48.580 に答える