如何在我已经创建的侧导航旁边创建一个顶部导航？

Question

就上下文而言，我实际上正在制作 Twitter 的 reskin。至少就目前而言，它就是这样。 我已经创建了一个 sidenav，我想在它旁边添加一个 topnav。 像这样的东西：图片

我想把“你 - 关注 - 发现|个人资料”作为topnav。

我尝试使用 go 关闭 w3schools 代码以获得顶部导航，但它没有用。 它的顶部只有一个灰色条，没有按钮。

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

对于上下文，我最初没有添加任何按钮或更改它们，但我认为这不会改变任何东西。 sidenav 在 topnav 之上，我希望 topnav 在它旁边。

我的 sidenav html：

<div class="sidenav">
        <img src="./img/Aero Textual Icon Green.png" class="icon-sidenav" alt="Aero Icon Top Sidenav" style="cursor:default">

        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">home</span>Timeline</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">notifications</span>Notifications</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">near_me</span>Explore</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">bookmark</span>Saved</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">sms</span>Messages</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">person</span>Profile</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">settings</span>Settings</a>
        <a href="#" class="sidebarbtn"><span class="material-symbols-rounded inline-icon">more_horiz</span>More</a>

        <a href="#"><button>Post</button></a>
    </div>

页面 css（现在全部是 sidenav 和 topnav）：

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' -25,
  'opsz' 48
}

.material-symbols-rounded-high {
  font-variation-settings:
  'FILL' 0,
  'wght' 700,
  'GRAD' 0,
  'opsz' 48
}

body {
    font-family: 'Coda', cursive;
    background-color: #212121;
    color: #fff;
}

.main {
    margin-left: 160px;
    font-size: 28px; 
    padding: 0px 10px;
}

.sidenav button {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 23px;
    margin-top: 25px;
    margin-left: 163px;
    border-radius: 50px;
    width: 230px;
    height: 55px;
    background-color: #2EFFA8;
    text-align: center;
    color: #212121;
    border: none;
    text-decoration: none;
}

.sidenav button:hover {
    background-color: #27d88e;
}

.icon-sidenav {
    padding-top: 30px;
    padding-bottom: 35px;
    width: 170px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.inline-icon {
    vertical-align: bottom;
    font-size: 32px !important;
    padding-right: 15px;
}

.sidenav {
    height: 100%;
    width: 550px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #181818;
    overflow-x: hidden;
    padding-top: 20px;
}
  
.sidenav a.sidebarbtn {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 200px;
    text-decoration: none;
    font-size: 22px;
    color: #ffffff;
    display: block;
}

.sidenav a:hover {
    color: #2EFFA8;
    cursor: pointer;
}

.sidenav a:active {
    color: #2EFFA8;
}

.sidenav a.split {
    float: left;
    color: white;
}

.topnav {
  background-color: #333;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
  
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

这道题不行因为结果是topnav在sidenav上面，我要topnav在sidenav的右边

我找不到要求将 topnav 放在 sidenav 旁边的问题，我已经看过这里和其他 5 个地方。

Answer 1

您可以将顶部导航更改为 display:flex，并将其内容对齐到中心，如下所示：

或者您可以通过使用显示网格并修改以下内容来使您的布局更加严格（推荐） ：

.sidenav {
    height: 100%;
    width: 550px;
    /* position: fixed; */
    background-color: #181818;
    overflow-x: hidden;
    padding-top: 20px;
    /*The following line says that this element spans for two rows*/
    grid-row: 1/-1;
}

body{
    display: grid;
    padding: 0 15% 0 15%;
    grid-template-columns: min-content max-content;
    grid-template-rows: min-content max-content;
    justify-content: left;
}

结果会是这样的：

然后要使导航栏固定到位，您可以在顶部导航之后添加另一个 div 并使其在 overflow-y 上滚动，如果您愿意，可以隐藏其滚动条。

最后我认为网格将是实现布局总体目标的最佳选择。

如果这有帮助，请投票。

谢谢