html - 网站内容位于工具栏旁边而不是下方

Question

我正在尝试按照 YouTube 上的教程创建工具栏，但我使用的是 Vuejs 而不是视频中的常规 HTML，并且 View 的内容(.vue 文件)位于工具栏旁边而不是下方，并且另一件事，我尝试使工具栏居中。

<template>
  <div id="app">
    <div class="toolbar">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
          <ul>
            <li>
              <a href>Our Team</a>
            </li>
            <li>
              <a href>Camp Sites</a>
            </li>
            <li>
              <a href>Mission &amp; Vision</a>
            </li>
            <li>
              <a href>Resources</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Things to do</a>
          <ul>
            <li>
              <a href>Activities</a>
            </li>
            <li>
              <a href>Parks</a>
            </li>
            <li>
              <a href>Shops</a>
            </li>
            <li>
              <a href>Events</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Contact</a>
          <ul>
            <li>
              <a href>Map</a>
            </li>
            <li>
              <a href>Directions</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">News</a>
        </li>
      </ul>
    </div>
    <div>
      <router-view/>
    </div>
  </div>
</template>

#app {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  background-size: none;
  margin-left: 10%;
}

.toolbar ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: arial;
}

.toolbar ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  opacity: 0.8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

.toolbar ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

.toolbar ul li a:hover {
  background-color: green;
}

.toolbar ul li ul li {
  display: none;
}

.toolbar ul li:hover ul li {
  display: block;
}

无论我今天尝试了什么，要么 View 正确位于工具栏下方但子菜单无法点击，要么 View 位于下方并居中但顶部有很大的边距以使菜单可点击或位于工具栏旁边。

我正在尝试复制这种工具栏及其正下方的 View 。

Answer 1

我想问题是“ float ”。在工具栏之后和包含路由器 View 的 div 之前，您将需要一个具有 clear:both 样式的 div。

...

div 类="工具栏"

...

/格

div style="clear:both"/

分区

路由器 View

...