UL LI Horizo​​nal List

Question

私は単純なUL/LIナビゲーションバーを作成しました。これは、IEとChromeの両方で完璧に見えますが、Firefoxでは最初の要素の後の要素は約35ピクセル下にシフトします。私はこの問題を解決するために考えていたすべてを試してきました。

これに関するお手伝いがあります。ここで

は私の現在のコードです：

HTML

<div class="navigation"> 
     <ul> 
      <li><a href="" class="button_selected_tab"><span>Home</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Calendar</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Catalog</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Learning</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Shopping Cart</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Account</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Support</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Sign Out</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Admin View</span></a></li> 
     </ul> 
     <div class="clear_float"> 
      &nbsp; 
     </div> 
    </div> 

CSS：

.navigation { 
      left: 1px; 
      position: absolute; 
      text-align: right; 
      top: 7px; 
      white-space: nowrap; 
     } 

     .navigation ul { 
      list-style: none; 
      margin: 0px; 
      padding: 0px; 
     } 

     .navigation ul li { 
      display: inline; 
      margin-right: 2px; 
     } 

     .navigation ul li a { 
      display: inline-block; 
      line-height: 17px; 
      /* 
     padding: 1px 11px 0px 
     */; 
      text-decoration: none; 
     } 
     a.button_selected_tab { 
      background: transparent url('images/orange_button_right.png') no-repeat scroll top right; 
      display: block; 
      float: left; 
      font: normal 12px arial, sans-serif; 
      height: 28px; 
      margin-right: 6px; 
      padding-right: 7px; /* sliding doors padding */ 
      text-decoration: none; 
      color: #FFFFFF; 
     } 

     a.button_selected_tab span { 
      background: transparent url('images/orange_button_left.png') no-repeat; 
      display: block; 
      line-height: 28px; 
      padding: 0px 10px 10px 15px; 
     } 

     a.button_inactive_tab { 
      background: transparent url('images/grey_button_right.png') no-repeat scroll top right; 
      display: block; 
      float: left; 
      font: normal 12px arial, sans-serif; 
      height: 28px; 
      margin-right: 6px; 
      padding-right: 7px; /* sliding doors padding */ 
      text-decoration: none; 
      color: #FFFFFF; 
     } 

     a.button_inactive_tab span { 
      background: transparent url('images/grey_button_left.png') no-repeat; 
      display: block; 
      line-height: 28px; 
      padding: 0px 10px 10px 15px; 
     } 

Answer 1

私はあなたのコードで例を作った、と.navigation ul liからmargin-right:2px;を除去することですべての要素を設定します同じ行。これはあなたが必要とするものですか？

例：http://jsbin.com/uhace3