CSS UL列表选项卡问题

Question

我创建了以下内容

而且我不知道如何固定标签之间的间距。

也许解决方案非常简单，但我无法弄清楚。

我尝试了几种方法，但找不到解决方案。

请问这有什么问题吗？

在这里您可以找到代码： http : //jsfiddle.net/SFw6V/

Answer 1

问题在tabs li类中

问题： display:inline-block向右添加额外的边距

两种解决方案：

1. display:block和float:left
2. margin-right:-4px;

工作小提琴： http : //jsfiddle.net/surendraVsingh/SFw6V/2/

详细说明和不同的解决方案： http : //css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

它们之间有一个空白，因为有一个空白字符（空格， ） 它们之间：

<ul class='tabs'>
    <li data-tab="#tab1">
        Tab 1
    </li><li data-tab="#tab2"> <!-- remove spaces -->
        Tab 2
    </li><li data-tab="#tab3"> <!-- remove spaces -->
        Tab 3
    </li>
</ul>

http://jsfiddle.net/SFw6V/1/