jquery - 如何在导航容器中放置额外的 div，均匀放置对象并将搜索对齐到右侧

Question

我只是在创建一个看起来很简单的导航。卡在我需要正确对齐的部分。

进度:https://jsfiddle.net/zigzag/bL1jxfax/

目标: 1) 确保顶部显示为:主页 |关于我们 |友情链接 |搜索 2)确保1中的元素均匀分布 3) 其他业务有两层导航

 <div class="container-fluid">
  <div class="row">
    <div class="col-sm-9">
      <nav class="navbar navbar-inverse">
        <ul class="nav navbar-nav">
          <li class="nav_page active">
            <a class="nav_txt" href="#">Home        
            </a>
          </li>
          <li>
            <a class="nav_txt" href="#">About us
            </a>
          </li>
          <li>
            <a class="nav_txt" href="#">Links
            </a>
          </li>
        </ul>
      </nav>
      <div id="search">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-search"></span> Search 
        </button>   
      </div>
    </div>
  </div>

</div>

Answer 1

如果你正确地内联它，只需添加 ul li 标签的 margin-right，这样它就会向右展开。

ul li {
  margin-right: (enter your desired amount);
}