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选项卡：选项卡之间有未知空间

回答

相关问题