css - 両側に影響を与えない CSS センタリング

Question

Twitter Bootstrap と Rails 3.2 を使用した単純な NavBar があります。

<header class="navbar navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
  <%= link_to logo, root_path, :class=>"logo1" %>
  <nav>
  <ul class="nav pull-right">
   <% if signed_in? %>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li id="fat-menu" class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><b class="caret"></b>
     </a>

 </header>

現在、ロゴは中央のツールバーの左側に配置され、リンクとドロップダウン キャレットは右側に配置されています。

両方にパディング/マージンを追加するにはどうすればよいですか (ロゴを左に約 5 ピクセル、右のコンテンツを右に約 5 ピクセル移動して、コンテンツを移動する代わりに中央の空白を犠牲にします。

例えば、

.navbar .container {
 width: 960px;
 margin-left:10px;
 }

..左側で機能します。しかし、どうすれば同時に権利に対して同じことを達成できますか? 申し訳ありませんが、フロントエンドのデザイナーではありません。

ありがとうございました。

Answer 1

ロゴをスパンに入れる

<span class="logo"><%= link_to logo, root_path, :class=>"logo1" %></span>

次にCSSを次のように使用します-

.logo{
    margin: 0 0 0 -5px;
}

.dropdown{
    margin: 0 -5px 0 0;
}

Answer 2

これを試して

<img src="logo.png" style="margin-left:-5px;" />