導航欄上的選單項和導航欄左側的公司圖示

我的網頁上有以下代碼：

<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>&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>

當我在網頁上看到導航欄和選單項時。它們看起來像這樣：

我想將徽標和公司名稱帶到導航欄的左側，并將選單項放在選單欄的右側，我希望選單項可以水平而不是垂直地顯示。我不確定我做錯了什么。

任何幫助將不勝感激。

uj5u.com熱心網友回復：

確保在查看代碼段時單擊整頁。一切都應該按照你想要的方式定位，但不想弄亂你的下拉選單項，因為我假設你有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" 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 hljs-tag"><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  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>

標籤：html css bootstrap-4 弹性盒

上一篇：如何向下移動單選按鈕？[復制]

下一篇：如何在影像上添加可點擊的文本