html - 导航栏中的中心表单

Question

我想做的是将搜索框放在导航栏的中央 ( image here )。我该怎么做？

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">logo</a>
      <div class="nav-collapse collapse">
        <form class="navbar-form pull-right">
          <div class="input-append">
            <input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
            <button class="btn" type="button">Search</button>
          </div>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

我使用的是 Bootstrap 附带的默认 CSS。

Answer 1

将表单元素包裹在它自己的 div 中并给它一个类或一个 id，然后创建一个自定义代码行使其居中，示例:

HTML:

<div id="search">
*form code here*
</div>

CSS:

#search { width: 200px; margin: auto; }