我相信这个问题已经被问了很多次,但我找不到应该搜索什么。
我有以下的HTML和CSS(请看jsfiddle实时示例):
<!--HTML-->
<body>
<div id="container">
<div id="header">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</div>
</body>
/* CSS */
#container {
background-color: red;
width: 400px;
height: 200px;
margin: auto;
}
#header ul {
list-style: none;
margin-top: 20px; /* I want this to be the margin at the top of the ul, not the container */
}
#header li {
float: left;
margin-right: 10px;
}
我遇到的问题与
<ul>
的margin-top
有关。它在#container
的<div>
上方添加了空间,而不是在<ul>
上方。我可能漏掉了CSS的一些基础知识,因为我真的不太理解这种行为。请问有谁能帮我解答一下?