Bootstrap選項卡：選項卡之間有未知空間

在我的特殊情況下，我對Bootstrap選項卡之間的空間感到困惑。Bootstrap選項卡：選項卡之間有未知空間

我爲web應用程序使用Bootstrap 2.3.2和Ace Theme（http://wrapbootstrap.com/preview/WB0B30DGR）。

這裏是我的HTML：

<div> 
     <ul class="nav nav-tabs " id="my-tabs"> 
      <li><a href="#page-1" data-toggle="tab">1</a></li> 
      <li><a href="#page-2" data-toggle="tab">2</a></li> 
      <li><a href="#page-3" data-toggle="tab">3</a></li> 
     </ul> 
    </div> 

    <div class="tab-content" id="my-panes"> 

     <div class="tab-pane" id="page-1"> 
      tab 1 
     </div> 

     <div class="tab-pane" id="page-2"> 
      tab 2 
     </div> 

     <div class="tab-pane" id="page-3"> 
      tab 3 
     </div> 

    </div>

這是我額外的CSS：

#my-tabs.nav-tabs > li { 
    display: inline-block; 
    float: none; 
} 


#my-tabs.nav-tabs > li > a { 
    padding: 8px 16px; 
    margin:0; 
}

這裏是的jsfiddle演示：http://jsfiddle.net/edAVC/5/

有標籤之間的空間。我對此感到困惑。花幾個小時，無法弄清楚爲什麼它在那裏。我想刪除標籤之間的空間。

請注意，由於其他原因，我必須使用display：inline-block for <li>元素。

讓我們假設我的CSS和HTML沒有改變。我可以添加什麼額外的CSS來刪除標籤之間的空間？

感謝和問候！

來源

2013-09-30 curious1

在bootstrap-combined.min.css中設置了保證金權利。

試試這個

#my-tabs.nav-tabs > li > a { 
    padding: 8px 16px; 
    margin:0; 
    margin-right: -4px; 
}

JSFiddle

來源

2013-09-30 00:36:07 Darren

感謝SOOOO多的點在bootstrap-combined.min.css中輸出css規則。在發佈之前，我使用了FF和Chrome，但無法找到它。我可以知道你指的是bootstrap-combined.min.css中的哪個CSS選擇器嗎？爲什麼我必須使用負邊距值？零值不起作用？謝謝！ – curious1

@ curious1不用擔心！選擇器是'.nav-tabs> li> a，.nav-pills> li> a'，它有'margin-right：2px' – Darren

這只是方式設置元素上線工作。你想要輸入的單詞之間的空格是空格嗎？這些塊之間的空間就像單詞之間的空格。 - Source

根據這個帖子你的選擇是：

設置陰性切緣刪除內嵌空間
設置字體大小的UL 0，有記錄的幾個問題
或只使用一個浮子代替顯示內聯塊反正

來源

2013-09-30 00:45:07

stacey，非常感謝您的額外信息。最好。 – curious1

Bootstrap選項卡：選項卡之間有未知空間

回答

相關問題