导航栏一直到顶部

Question

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

<%@ 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;
    }

我试图将 min-width 增加到 100%。当我这样做时，导航栏向下移动，导航栏和顶部之间有一个 space。下面是图片

我该如何解决这个问题？

Answer 1

只需添加位置和顶部属性在 CSS

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

导航栏一直到顶部

navigation bar all the way to the top

css

stylesheet