html - CSS UL 列表标签问题

Question

我创建了以下

而且我不知道如何修复选项卡之间的间距。

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

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

请问有什么问题吗？

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

Answer 1

问题出在标签 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/