目前正在做我的第一个SvelteKit项目。我创建了一个"+ layout.svelte"文件，它使用了我的lib文件夹中的导航栏和页脚组件。当我向页面添加内容时，它当前会覆盖导航栏。
+布局.苗条
<script>
import Nav from "$lib/nav.svelte";
import Footer from "$lib/footer.svelte"
</script>
<body>
<Nav />
<Footer />
</body>
<slot></slot>
<style>
body {
margin: 0;
}
</style>nav.svelte
<script>
const nav = [
{ title: "Home", path: "/" },
{ title: "Products", path: "/products"},
{ title: "News", path: "/news"},
]
</script>
<nav>
<ul>
{#each nav as item}
<li><a href={item.path}>{item.title}</a></li>
{/each}
</ul>
</nav>
<style>
nav {
position: fixed;
width: 100%;
padding-bottom: 0.01%;
box-shadow: 0 1px 1px -1px black;
}
ul {
list-style: none;
text-align: center;
padding-left: 0;
}
li {
display: inline-block;
margin-right: 2em;
font-weight: bold;
}
</style>影响+布局. svelte的"+页面. svelte"
<script>
import products from "..\\products.json";
</script>
<table id="productSearchResult">
<thead>
<tr>
<th></th>
<th>Product ID</th>
<th>Supplier ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{#each products as product}
<tr>
<td><img src="product.jpg" alt="product"></td>
<td>{product.productId}</td>
<td>{product.supplierId}</td>
<td>{product.statusId}</td>
</tr>
{/each}
</tbody>
</table>
<style>
#productSearchResult {
text-align: center;
/* This also affects the navbar */
margin-top: 5%;
padding: 10px;
border: 1px solid #bebebe;
box-shadow:
15px 15px 30px #bebebe,
-15px -15px 30px #ffffff;
}
#productSearchResult img {
width: 50px;
}
</style>当我试图添加margin-top到html表格中，使其显示在导航栏下方时，导航栏也受到影响。表格位于另一个路径的"+ page. svelte"中。据我所知，"+ page. svelte"中的css应该只适用于当前文件。我做错了什么？
1条答案
按热度按时间2w2cym1i1#
这并不是CSS影响其他元素，你已经把nav元素设置为
position: fixed，所以不管其他的什么，它都会停留在视口的那个位置。如果不想这样，使用不同的放置机制。(Also，不要添加
body元素，应该只有一个元素，并且应该在app.html文件中。在层次结构中，页面<slot/>应该出现在页眉和页脚之间，否则标签导航和屏幕阅读器顺序将没有意义。）