ご覧のとおり、フォームはそれ自体の前後に新しい行を作成しているように見えます。Twitter Bootstrap を使っているので試してみましたがだめ.form-inline
でした。フォームを他の要素とインラインに保つ方法はありますか?
以下は、その下に記述されたソース コードへの JSFiddle です。あまり表示されませんが、フォームの動作が表示されます。
<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>