Html 如何对齐导航栏中的元素？

我正在使用bootstrap框架构建一个导航栏。我试图将搜索字段对齐到最右边，但它没有发生。 如有任何建议，将不胜感激。下面是我的代码

<h1 id="topHeader"><a href="/EduTechOnline/jsp/secure/index.jsp" id="topHeaderLink"></a></h1>
<div id="logo">
<img src="/EduTechOnline/images/logo.png" width="200" height="80" />
<div id="slogan"><h2 id="slogan">Take the world's best online courses</h2></div>
</div>

<!-- This is the header that will be present on every page -->
<nav class="navbar navbar-inverse" role="navigation">
   <div class="container-fluid">
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbar-collapse-1">

  <ul class="nav navbar-nav">
  <nav id="headerli">
  <li><a class="active"href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Videos</a></li>
    </ul>
    <ul class="nav pull-right nav navbar-nav">

  <li> <form class="navbar-form" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn-group btn-group-sm">Go</button>
  </form>
  </li>
  </ul>
  </ul>
    </nav>
</div>
    </ul>
</nav>

参加世界上最好的在线课程
切换导航








去

---

您是否尝试过

float:right.navbar表单上编码>

---

你也可以试着把它从

nav#headerli

和孩子

li

中取出，放在片段的倒数第二行。

有一些地方不正确。对于

.navbar标题
，
#nav
作为
ul
（无效）的直接子项，以及错误的类（
.navbar right
不是
。向右拉
）。与示例和文档进行比较

演示：


切换导航






去

<nav class="navbar navbar-inverse" role="navigation">
   <div class="container-fluid">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
   </div>
   <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
         <li><a class="active"href="#">Home</a></li>
         <li><a href="#">Courses</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Videos</a></li>
      </ul>
      <div class="navbar-right">
         <form class="navbar-form" role="search">
            <div class="form-group">
               <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Go</button>
         </form>
      </div>
   </div>
</nav>