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;
}

但是当您发布您的网站时，请使用Eric Myers CSS 重置

就像 Maxime Morin 说的那样，您可能想查看http://nicolasgallagher.com/about-normalize-css/

于 2012-10-22T18:36:45.080 回答
1

ul由于折叠边距，问题可能是元素的上边距。

还要确保 div 没有边距和填充（它们可能没有，因为 div 默认没有边距。

人们经常使用这样的 CSS 重置来删除所有元素上的所有边距和填充。之后，您可以在需要的地方添加特定样式。一旦你开始“真正的”造型，你应该考虑使用它。

于 2012-10-22T18:36:19.513 回答
1

在 Chrome 中呈现良好，告诉我您可能正在使用 IE。您可以通过使用 CSS 重置http://meyerweb.com/eric/tools/css/reset/将所有 CSS 元素设置回 0 来解决此类问题，以便所有浏览器从同一点开始，覆盖它们的一些内置在默认 CSS 中。

关于重置要记住的事情是你知道必须为你使用的每个元素设置样式。例如列表将没有填充，没有默认列表样式等。您当然可以从重置中删除一些项目，但这会破坏它们的目的。

于 2012-10-22T18:38:06.720 回答
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 回答