CSS UL列表选项卡问题

Question

I have created the following

And I don't know how to fix the spacing between the tabs.

Maybe the solution is extrimply simple but I cannot figure it out.

I have try several methods but I cannot find out a solution.

Any idea please for what is wrong with that ?

Here you can find the code : http://jsfiddle.net/SFw6V/

Answer 1

The problem is in tabs li class

Problem: display:inline-block add extra margin to right

Two Solutions:

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

Working Fiddle: http://jsfiddle.net/surendraVsingh/SFw6V/2/

Better explained & different solutions: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

They have a margin because there is a whitespace character (space, ) between them:

<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/