导航栏一直到顶部答案

【问题标题】：navigation bar all the way to the top导航栏一直到顶部
【发布时间】：2021-06-02 02:45:21
【问题描述】：

我为我的 asp.net 页面创建了一个导航栏。我把它放在我的 site.master 页面上。我想增加导航栏的宽度，让它一直到屏幕的尽头。现在导航栏很短，只占屏幕的一半

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="RMAPTrusted.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>

    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
     <link href="Content/styles.css" rel="stylesheet" type="text/css" />  
  <link href="Content/new.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <form runat="server">
      <nav class="navbar">
      <label class="navbar-toggle" id="js-navbar-toggle" for="chkToggle">
              <i class="fa fa-bars"></i>
          </label>
      <a href="#" class="logo">logo</a>
      <input type="checkbox" id="chkToggle" />
      <ul class="main-nav" id="js-menu">
        <li>
          <a href="#" class="nav-links">Home</a>
        </li>
        <li>
          <a href="#" class="nav-links">Products</a>
        </li>
        <li>
          <a href="#" class="nav-links">About Us</a>
        </li>
        <li>
          <a href="#" class="nav-links">Contact Us</a>
        </li>
        <li>
          <a href="#" class="nav-links">Blog</a>
        </li>
      </ul>
  
    </nav>

  

        <div>
  
  </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>

    </form>
</body>
</html>

下面是图片

下面是样式表：

@media screen and (min-width: 768px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
        position:absolute;
        top:0px;
    }

我尝试将最小宽度增加到 100%。当我这样做时，栏会向下移动，并且导航栏和顶部之间有一个空间。下面是图片

我该如何解决这个问题？

【问题讨论】：

您将不得不在占位符处添加内容（就好像服务器已经将它发送到那里一样）。如果没有该内容，导航栏将位于最顶部。
在设置最小宽度之前先将类导航栏的宽度设置为 100% 怎么样？
是的，这行得通！

标签： css stylesheet

【解决方案1】：

只需在 CSS 中添加 Position 和 Top 属性

  #randomdiv{
    position:absolute;
    top:0px;
  }

【讨论】：

我尝试在导航栏中添加位置和顶部css，导航栏变得非常小。我将图片粘贴在底部的原始帖子中，包括css。
那就分不清哪里错了