CSS UL列表选项卡问题

Question

我创建了以下

我不知道如何修复标签之间的间距。

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

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

请问这有什么问题吗？

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

Answer 1

问题出在标签li 类

中

<强>问题：   display:inline-block向右边添加额外的保证金

两个解决方案：

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

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

更好的解释＆amp;不同的解决方案： 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/