如何使導航欄元素正確？-有解無憂

如何使導航欄元素正確？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Company</a>

          <ul class="nav navbar-nav">
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>

          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">On the right</a></li>
          </ul>

        </div>
        </div>
      </nav>
      
  </body>
</html>

我想要右手邊的“在右邊”，但即使在使用“nav navbar-nav navbar-right”之后我也無法做到。誰能解釋一下我該怎么做？新來的學習者。謝謝你的幫助

uj5u.com熱心網友回復：

設定.navbar-header {width: 100%}好就可以開始了。

作業小提琴

.navbar-header {width: 100%}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Company</a>

          <ul class="nav navbar-nav">
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>

          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">On the right</a></li>
          </ul>

        </div>
        </div>
      </nav>
      
  </body>
</html>

uj5u.com熱心網友回復：

我建議只使用 vanilla css（特別是如果你是一個新的學習者）。

要在 vanilla css 中實作，請執行以下操作。

<nav class="nav">
  <div>
    <a href="#">Company</a>

    <ul>
      <li><a href="#">Item One</a></li>
      <li><a href="#">Item Two</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="#">On the right</a></li>
    </ul>
  </div>
</nav>

<style>
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

在使用任何框架之前學習 vanila css。

uj5u.com熱心網友回復：

這個怎么樣？

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>
    <nav class="nav navbar-default navbar-fixed-top">
      <div class="container">
        <div class="">
          <a href="#" class="navbar-brand">Company</a>

          <ul class="nav navbar-nav">
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>

          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">On the right</a></li>
          </ul>

        </div>
        </div>
      </nav>
      
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/317767.html

標籤：html css 网络

上一篇：如何在ASP.NETMVC中使用asp-controller或asp-action訪問我的url中的多個層

下一篇：ReactPHP,Websockets如何在兩個服務器之間建立連接并擁有一個小型的命令控制臺