html - CSSULリストタブの問題

Question

私は以下を作成しました

そして、タブ間の間隔を修正する方法がわかりません。

たぶん解決策は非常に単純ですが、私はそれを理解することはできません。

私はいくつかの方法を試しましたが、解決策を見つけることができません。

何が悪いのか考えてみてください。

ここにコードがあります：http：//jsfiddle.net/SFw6V/

Answer 1

問題はタブliクラスにあります

問題： display:inline-block右側に余白を追加する

2つのソリューション：

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/