我有两个页面使用相同的 CSS 文件。本质上，我希望页眉固定在页面顶部，没有边距。它适用于我的索引页，但不适用于下一页。更令人困惑的是，它在 Codepen 中有效，但在我的 Visual Studio 中无效。我已经检查了两个页面的 CSS 链接，它工作正常，CSS 的其余部分在两个页面上都可以正常工作。在其中一个无效的 header 上方只有这个边距。检查元素显示所有边距应为零。 Incorrect (see black line at top?) Correct (see no line?) 正确页面的 HTML:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Luxury Bath</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn"><a href="#">Products</a></li>
<li class="btn"><a href="#">News</a></li>
<li class="btn"><a href="#">FAQ</a></li>
<li class="btn"><a href="#">About</a></li>
<li class="btn"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div id="index-container">
错误页面的 HTML:
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn"><a href="#">Products</a></li>
<li class="btn"><a href="#">News</a></li>
<li class="btn"><a href="#">FAQ</a></li>
<li class="btn"><a href="#">About</a></li>
<li class="btn"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
两者共享 CSS:
body {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto 0 auto;
}
#sticky-h1 {
margin: 0 auto 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 60px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}
最佳答案
我可以看到#sticky-h1 有一个“padding-top: 20px”。 您可能需要删除该填充以使其堆叠到顶部。 我还认为你只需要“margin: 0 auto;”一次。
请检查以下示例: (我使用了 SO 标志，因为我没有你的标志)
body, html {
background: black;
font-family: 'Playfair Display', serif;
margin: 0;
padding: 0;
}
.header {
grid-area: a;
margin-top:0;
}
.sticky-menu {
position: fixed;
width: 100%;
margin: 0 auto;
}
#sticky-h1 {
margin: 0 auto;
background: white;
padding-left: 40px;
padding-top: 20px;
width: 100%;
}
.headlogo {
width: 300px;
}
.nav {
grid-area: b;
}
#banner {
margin-left: auto;
margin-right: auto;
text-align: center;
background: darkgrey;
width: 100%;
position: fixed;
top: 0;
margin-top: 100px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: dimgray;
}
.btn {
color: #FFF;
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
display: inline-block;
width: 200px;
}
#privacy-container {
color: white;
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
}
#privacy-header{
color:black;
padding-bottom: 10px;
padding-left: 10px;
font-size: 50px;
background-color: white;
}<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">
<title>Cauldron Privacy Policy</title>
</head>
<body>
<div class="sticky-menu">
<header class="header">
<h1 id="sticky-h1">
<a href="index.html">
<img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
</a>
</h1>
</header>
<nav class="nav">
<ul id="banner">
<li class="btn"><a href="#">Products</a></li>
<li class="btn"><a href="#">News</a></li>
<li class="btn"><a href="#">FAQ</a></li>
<li class="btn"><a href="#">About</a></li>
<li class="btn"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>根据您的评论，我已将“padding-top: 20px”放回原来位置，并将“#banner”的边距增加到 100px。
关于html - CSS 适用于一个页面但不适用于另一页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51103570/