如何将正文内容与侧面垂直导航栏分开？

Question

我已经为锁定在页面左侧的垂直导航栏编写了一些代码，但是当我尝试插入主标题时，它会将其放在导航栏中，而不是网页的主要内容中，我该如何防止这个？

当我为页面标题添加 h1 标签时，我以为它会将其放在空白区域的一侧，但它却将其作为文本推到了我的导航栏中。

（https://i.sstatic.net/V0G51iFt.png）

Answer 1

更新你的CSS部分：

ul{
    font-size: 19px;
    list-style: none;
    margin:0;
    padding:0;
    background-color: #cfe2cf;
    width: 230px;
    height: 100%;
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
  }
    

添加.content-area：

 .content-area{
     padding-left: 250px;
 }
    

在 HTML 中请添加：

<main class="content-area">
     <h1>This is the content area</h1>
</main>