正文标签中的第一个元素硬粘在左上角



到目前为止,我在每一个 CSS 练习中都遇到了问题,我的身体标签中的第一个元素,无论是 img 还是 h1 都卡在页面的左上角(我假设正文标签开始的地方(,并且无论边距大小或元素宽度如何,都不可能以任何方式移动它。我什至尝试为它添加背景颜色,只是为了看看它是否有效,而它没有,所以我想由于某些原因,无法对此元素进行任何修改。

这是我的网页

<body>
<header class="Top">
<img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">
<nav class="NavBar">
<a href="" class="links">Home</a>
<a href="" class="links">About</a>
<a href="" class="links">Class schedules</a>
<a href="" class="links">Performances</a>
<a href="" class="links">Blog</a>
<a href="" class="links">Contact</a>
</nav>
<div class="ClearFix"></div>
</header>

这是我的 CSS。请注意,在此显示的行之前,我使用的是完全未经编辑的Meyer css重置版本

header.Top{
width: 1440px;
margin: auto;
background-color: #303030;
overflow: hidden
}
div.wrapper
img.Logo{

margin-top: 35px;
margin-bottom: 35px;
margin-left: 250px;
margin: auto;
background-color: #303030;

}
nav.NavBar{
float: right;
width: 490px;
background-color: #303030;
list-style: none;
margin: auto;
margin-right: 250px
}
a.links{
float: right;
font-size: 15pt;
font-family: 'Muli', sans-serif;
color: #8c8c8c;
margin-top: 50px;
margin-right: 18px;
}
div.container 1{
width: 490px;
clear: both
}
img.dancers{
float: right;
}
div.ClearFix{
clear: both;
}

该 img.logo 应该应用边距,如 css 中指定的那样。然而,它只是卡在那里,

如下图所示问题

我猜你说的是你的标志,而不是实际的header元素。

首先,你的css选择器是错误的。 它应该是img.logo而不是img.Logo

另外,从 css 中删除该div.wrapper代码。 那在那里做什么? 然后从您的img.logo样式中删除margin: auto,您就可以开始了。

CSS 中的声明顺序很重要(因此是"级联"(。

因此,当您执行以下操作时:

img.Logo{
margin-top: 35px;
margin-bottom: 35px;
margin-left: 250px;
margin: auto;
background-color: #303030;
}

margin:auto将覆盖上述所有边距。

您应该尝试将margin:auto放在其他边距之前,它应该可以工作。

最新更新