1

私はCSSが初めてなので、私を厳しくしないでください。「ヘッダー」DIV のすぐ下に黄色の背景 DIV を配置しようとしていますが、何らかの理由で前後にパディングが配置されているようで、その理由がよくわかりません。リストを削除すると、問題はなくなります。

これは HTML コードです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
    <p>Header</p>
</div>
<div id="listDiv">
    <ul>
<li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
      <li>Menu item 1</li> 
    </ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>

</body>

そして、これはCSSです：

@charset "utf-8";
/* CSS Document */

div#headerDiv { background-color:#F00;
         height:100px;
         position:relative;
         }

div#listDiv {background-color:#FF0;
        }

div#listDiv ul {list-style-type:none;}

div#listDiv li { display:inline;}

div#mainviewDiv {background-color:#060;}

div#footerDiv {background-color:#999;}

ここに画像の説明を入力

4

6 に答える 6

3

#listDivと#headerDivを設定しますmargin:0px;

于 2012-10-22T18:35:59.903 に答える
3

これを試したかどうかはわかりませんが、これを CSS ファイルの先頭に追加すると役立つ場合があります。

*{
    margin:0;
    padding:0;
}

ただし、Web サイトを公開するときは、Eric Myers の CSS リセットを使用します。

Maxime Morin が言ったように、http://nicolasgallagher.com/about-normalize-css/をチェックしてみてください。

于 2012-10-22T18:36:45.080 に答える
1

Chromeで正常にレンダリングされ、おそらくIEを使用していることがわかります。このような問題は、CSSリセットhttp://meyerweb.com/eric/tools/css/reset/を使用して解決できます。これにより、すべてのCSS要素が0に戻され、すべてのブラウザーが同じポイントで起動し、ビルドされたブラウザーの一部がオーバーライドされます。デフォルトのCSSで。

リセットについて覚えておくべきことは、使用する各要素のスタイルを設定する必要があることを知っているということです。たとえば、リストにはパディングやデフォルトのリストスタイルなどはありません。もちろん、リセットからいくつかのアイテムを削除することはできますが、そのようなものはそれらの目的を無効にします。

于 2012-10-22T18:38:06.720 に答える
1

問題はおそらくul要素の上部マージンです。マージンの崩壊によるものです。

また、div にマージンとパディングがないことを確認してください (div にはデフォルトでマージンがないため、おそらくそうではありません。

このような CSS リセットを使用して、すべての要素のマージンとパディングをすべて削除することがよくあります。その後、必要な場所に特定のスタイルを追加できます。「実際の」スタイリングを開始したら、それを使用することを検討する必要があります。

于 2012-10-22T18:36:19.513 に答える
0

一部のタグにはデフォルトのスタイルがあります-実際に宣言していなくても。たとえば、次の単純なものを追加することで、このルールをオーバーライドできます。

margin:0; 
padding:0;

CSS宣言に。

于 2012-10-22T18:39:15.670 に答える
0

順序付けされていないリストは、40 の左パディングを作成しています。コードを次のように置き換えます。

div#listDiv ul {list-style-type:none;
 padding:0;
 }

始めたばかりの場合、多くのデフォルト スタイルの問題に遭遇します。それを続ければ、あなたは学ぶでしょう。私たちは皆、どこかから始めなければなりませんでした！

于 2012-10-22T18:42:17.250 に答える