导航栏上的菜单项和导航栏左侧的公司图标

Posted

技术标签:

【中文标题】导航栏上的菜单项和导航栏左侧的公司图标【英文标题】:menu items on the navigation bar and company icon on the left side of the nav bar 【发布时间】:2021-12-28 19:46:03 【问题描述】:

我的网页上有以下代码:

<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
        
            <img  src="~/Images/InfoOrange.png"    class="d-inline-block align-middle mr-2" runat="server" />
 
       <span style="font-size:25px;color:white;"><span style="color:#e9c46a">Test City</span><br />Test Company</span>

    </span>
     
       <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
       <%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
        <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Users
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Details</a>
          <a class="dropdown-item" href="Depatment.aspx">Department</a>
     
         <%-- <a class="dropdown-item" href="#">Sections</a>--%>
        </div>
      </li>
          <li>&nbsp;</li>

              <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Admin
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
          <a class="dropdown-item" href="#">Configuration</a>

        </div>
      </li>
           <li>&nbsp;</li>
               <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Records
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
          <a class="dropdown-item" href="#">Verify</a>
          <a class="dropdown-item" href="DocReport.aspx">Report</a>
            <a class="dropdown-item" href="BucketList.aspx">S3 List</a>
        </div>
      </li>

      </ul>
    </div>
          
  </div>
</nav>

当我在网页上看到导航栏和菜单项时。它们看起来像这样:

我想将徽标和公司名称带到导航栏的左侧,并将菜单项放在菜单栏的右侧,并且我希望菜单项可以水平而不是垂直显示。我不确定我做错了什么。

我们将不胜感激。

【问题讨论】:

【参考方案1】:

确保在查看 sn-p 时单击整页。一切都应该按照你想要的方式定位,但不想弄乱你的下拉菜单项,因为我假设你有 js 或类似的东西。你可以把media-queries打上来调整浏览器的响应速度。

ul 
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
  <div class="container-fluid">
    <span class="navbar-brand" style="display:flex;">
        
            <img  src="~/Images/InfoOrange.png"    class="d-inline-block align-middle mr-2" runat="server" />
 
       <span style="font-size:25px;color:white;"><span style="color:#e9c46a">Test City</span><br />Test Company</span>

    </span>
     
       <div id="navbarSupportedContent" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto">
       <!-- <li class="nav-item active--><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a>
        <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Users
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Details</a>
          <a class="dropdown-item" href="Depatment.aspx">Department</a>
     
         <!-- <a class="dropdown-item" href="#">Sections</a>-->
        </div>
      </li>
          <li>&nbsp;</li>

              <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Admin
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
          <a class="dropdown-item" href="#">Configuration</a>

        </div>
      </li>
           <li>&nbsp;</li>
               <li class="nav-item dropdown nav-item active">
        <a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Records
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
          <a class="dropdown-item" href="#">Verify</a>
          <a class="dropdown-item" href="DocReport.aspx">Report</a>
            <a class="dropdown-item" href="BucketList.aspx">S3 List</a>
        </div>
      </li>

      </ul>
    </div>
          
  </div>
</nav>

【讨论】:

以上是关于导航栏上的菜单项和导航栏左侧的公司图标的主要内容,如果未能解决你的问题,请参考以下文章

导航栏上的 CSS 对齐问题

Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单

如何在导航栏上的 UIBarButtonItem 内偏移 UIButton 图像?

无法识别导航栏的图像视图上的触摸。?

从 iOS 11 上的左侧菜单导航后 Xcode 9 导航栏问题不在 iOS 10.3 及更低版本上

求教Android去掉虚拟按键全屏显示的方法