[英]menu items on the navigation bar and company icon on the left side of the nav bar
I have the following code on my web page:我的 web 页面上有以下代码:
<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" alt="ACR" width="80" height="80" 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> </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> </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>
when I see the navbar and the menu items on the web page.当我在 web 页面上看到导航栏和菜单项时。 They look like this:它们看起来像这样:
I want to bring the logo and the company name to the left side of the navbar and menu items on the right side of the menu bar and I want the menu items to be seen horizontally rather than vertically.我想将徽标和公司名称带到导航栏的左侧,并将菜单项放在菜单栏的右侧,并且我希望水平而不是垂直地看到菜单项。 I am not sure what am I doing wrong.我不确定我做错了什么。
Any help will be highly appreciated.任何帮助将不胜感激。
Make sure you click full-page when viewing the snippet.确保在查看代码段时单击整页。 Everything should be positioned how you want but didn't want to mess around with your drop-down menu items because I assume you have js
or something for those.一切都应该按照你想要的方式定位,但不想弄乱你的下拉菜单项,因为我假设你有js
或其他东西。 You can put media-queries
on to adjust the responsiveness of the browser.您可以打开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" alt="ACR" width="80" height="80" 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> </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> .</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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.