如何让导航栏元素正确？答案

【问题标题】：How to get navbar elements to right?如何让导航栏元素正确？
【发布时间】：2021-11-27 11:11:30
【问题描述】：

<!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”，我也无法做到。谁能解释一下我该怎么做？新学员来了。感谢您的帮助

【问题讨论】：

没关系，伙计们，我发现我的错误是缺少一个 div。谢谢大家的回复。

标签： html css web

【解决方案1】：

设置.navbar-header {width: 100%}，一切顺利。

工作fiddle

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

【讨论】：

【解决方案2】：

我建议只使用 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。

【讨论】：

【解决方案3】：

这个怎么样？

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

【讨论】：