Question

所以我用Vue.js做一些项目

该项目应该是组件中的导航栏，然后我根据用户使用组件标签在其他组件之间切换。

我为导航栏和东西设置了网格区域，但是当我为包含标签的主标记设置了网格区域时，事情变得一团糟，导航栏奇怪地重叠了主标记中的内容（它可以当您也弄乱了样式标签的作用域时，又弄乱了另一种方法，就像我在此所做的那样

我尝试了所有可能做的事情，定义了行，定义了组件或父级中的网格区域。我所知道的一切，但无济于事，网格全弄乱了，我也不知道为什么。

父组件（App.vue）：

<template>
  <div id="grid">
    <nav id="navbar">
      <ul id="nav">
        <a href="#"><li>{{navbar.Home}}</li></a>        
        <a href="#"><li>{{navbar.Reservation}}</li></a>
        <a href="#"><li>{{navbar.About}}</li></a>
        <a href="#"><li>{{navbar.Contact}}</li></a>
      </ul>
      <a href="#">Sign Up</a>
      <img src="https://i.pinimg.com/564x/8b/fa/5d/8bfa5d6a52a03e83b995fec69a4d8c2c.jpg" alt="" id="logo">
    </nav>
    <main>
    <component v-bind:is="Home" id="component"></component>
    </main>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Aboutus from "./components/About us.vue";
import Contact from "./components/Contact.vue";
import Reservation from "./components/Reservation.vue";
import Footer from "./components/Footer.vue";
export default {
  components: {
    Home: Home,
    "About-us": Aboutus,
    Contact: Contact,
    Reservation: Reservation,  
    Footer: Footer
  },
  data() {
    return {
      navbar: {
        Home: "Home",
        Reservation: "Reservation",
        About: "About us",
        Contact: "Contact"
      },
      Home: "Home"
    };
  }
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 20% 60% 20%;
  grid-template: 
  "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar ."
  "content content content content content content content content content content";
}
#navbar {
  display: flex;
  flex-direction: row-reverse;
  grid-area: navbar;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid rgb(230, 231, 233);
}
#navbar > img {
  max-width: 100px;
  height: 100px;
}
#navbar > ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
li {
  list-style-type: none;
  margin: 20px;
  color: black;
}
a {
  text-decoration: none;
}
#navbar > a {
  border: 1px solid gainsboro;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  margin: 0 auto;
  color: black;
}
#navbar > a:hover {
  background-color: lightskyblue;
  transition: 0.5s;
  color: white;
  border-bottom: 1px solid black;
}
ul > a:hover {
  border-bottom: 5px solid #5fb0e4;
  transition: 0.5s;
  background-color: #eeeeee;
}
</style>

第二个组件，当我定义其网格区域时，一切都搞砸了（Home.vue，Reservation.vue等）：

<template>
  <main id="container">
    <small>Best Experience</small>
    <h1>The future starts now!</h1>
  </main>
</template>

<script>
export default {

};
</script>

<style>
</style>

出了什么问题？

为什么此页面的元素重叠？

0 个答案: