jquery-ui - 带有表单和几个按钮的 CSS 导航栏导致表单换行

Question

如您所见，表单似乎在其前后创建了新行。我正在使用 Twitter Bootstrap，所以我尝试过.form-inline，但也没有用。有没有办法让表单与其他元素保持一致？

下面是 JSFiddle 到它下面写的源代码。它没有显示太多，但显示了表单的行为。

http://jsfiddle.net/UHNtA/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
  <div class="container">


      <div class="login-widget pull-right">

        <button id="login-toggle" type="button" class="btn btn-primary"><i class="icon-white icon-chevron-left"></i>Log in</button>
        <form id="login" class="navbar-form form-inline" method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
          <input type="text" class="span2" placeholder="Username" name="username">
          <input type="password" class="span2" placeholder="Password" name="password">
          <button type="submit" class="btn btn-primary" name="submit">Log in</button>
        </form>
        <button type="button" class="btn btn-primary" onclick="location.href='<?php echo $_SERVER['PHP_SELF'].'/register.php'?>'">Register</button>

      </div>

  </div>
</div>

Answer 1

为什么它在你的 from 之前和之后创建行，你把它们放在你的表单之外，你需要在你的标签中包含你的login和register<form>

看到这个小提琴：http: //jsfiddle.net/2nY89/54/

Answer 2

您需要将登录表单更改为显示：内联：

#login {
  display: inline;
}

请参阅更新的 jsfiddle：http: //jsfiddle.net/UHNtA/1/