引导选项卡:在选项卡之间有未知的空间

Question

在我的特殊情况下，我对引导标签之间的空间感到困惑。

我正在使用引导2.3.2和Ace主题(http://wrapbootstrap.com/preview/WB0B30DGR)的web应用程序。

以下是我的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/

制表符之间有空格。我对此感到困惑。花上几个小时，却弄不清楚它为什么会在那里。我想移除标签之间的空格。

请注意，出于其他原因，我必须使用<li>元素的display:内联块。

让我们假设我的css和HTML没有变化。我可以添加哪些额外的CSS来删除选项卡之间的空间？

谢谢和问候！

Answer 1

在bootstrap-combined.min.css中有一个空白设置。

尝尝这个

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

JSFiddle

Answer 2

这只是在行上设置元素的方式。你希望你键入的单词之间的空格是空格，对吗？这些块之间的空间就像单词之间的空格一样。-http://css-tricks.com/fighting-the-space-between-inline-block-elements/

根据这篇文章，你的选择是：

• 设置负边距以删除内联空间。
• 在ul上设置字体大小为0，并记录了一些问题。
• 或者只是使用浮点数而不是显示内联块。