Css 导航栏一直到顶部_Css_Stylesheet

Css 导航栏一直到顶部

css

Css 导航栏一直到顶部,css,stylesheet,Css,Stylesheet,我为我的asp.net页面创建了一个导航栏。我把它放在我的网站主页上。我想增加导航栏的宽度，让它一直延伸到屏幕的尽头。现在，导航栏很短，只覆盖了屏幕的一半 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="RMAPTrusted.SiteMaster" %> <!DOCTYPE

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

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

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

如何修复此问题？

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

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

您必须在占位符处添加内容（就像服务器已经将内容发送到占位符一样）。如果没有这些内容，导航栏位于最顶端。在设置最小宽度之前，先将类导航栏的宽度设置为100%怎么样？是的，这很有效！我尝试在导航栏中添加位置和顶部css，导航栏变得非常小。我将图片粘贴在原始帖子的底部，包括css。然后我就看不出有什么问题了

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