負のマージンとの重複やフロートは

Question

私はこのようになりますナビゲーションバーがあります。

を、最近CSSでそれにPNG矢印を変更することを決定しました。 CSSの矢印が重なっている唯一の問題は、期待通りに機能しません。次のnavブロックは前の矢印と重なって隠れていますが、次のnavブロックと重なるはずの矢印です（画像を使用している場合）。 .navarrowから負のマージンを削除すると、上記の画像のようにnavblockの間隔が表示されます。

希望の効果（先行する.navarrowは後続の.navblockと重複します）を達成する方法はありますか？ CSSの色は簡単に変更できるので、CSSの矢印が好ましい。このような

<div class="navbar"> 
    <div class="navblock home"><a href="/">Home</a></div> 
    <div class="navarrow"></div> 
    <div class="navblock category"><a href="/apparel/">Apparel</a></div> 
    <div class="navarrow"></div> 
    <div class="navblock group"><a href="/apparel/jeans/"></a>Jeans</div> 
    <div class="navarrow"></div> 
    <div class="navblock item">Bla-bla</div> 
    <div class="navarrow"></div> 
</div> 

.navbar { 
    width: 100%; 
    margin: 20px auto; 
    height: 40px; 
    line-height: 40px; 
    font-size: 16px; 
} 

.navblock { 
    float: left; 
    padding: 0 20px 0 40px; 
} 

/* triangle pointing to the right */ 
.navarrow { 
    width: 0; 
    height: 0; 
    border-left: 20px solid green; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    float: left; 
    margin-right: -20px; /* overlap */ 
} 

Answer 1

私は私の例を願っています

助けます

http://jsfiddle.net/amkrtchyan/eju9r/14/

Answer 2

気にいらない...私はそれあなたはおそらくこれを行うにはほとんどのマークアップを変更したいとしている

http://jsfiddle.net/amkrtchyan/eju9r/4/

Answer 3

EITHキャンバスしてみてください。

<ul class="navbar"> 
    <li><a href="#"><span>Home</span></a></li> 
    <li><a href="#"><span>Apparel</span></a></li> 
</ul> 

CSS：

.navbar { 
    height: 40px; 
    padding: 0; 
    list-style: none; } 
.navbar li { float: left; } 
.navbar li a { 
    background: url(left_image.gif) 0 0 no-repeat; 
    display: block; } 
.navbar li a span { 
    background: url(arrow.png) 100% 0 no-repeat; 
    height: 40px; 
    padding: 0 30px; 
    display: block; } 

プレビュー：http://jsfiddle.net/Wexcode/UdbnG/

あなたがどんな説明が必要なら、私に教えてください。

Answer 4

申し訳ありませんが、私は男の子を理解しました。それは次のようになりますように、0に.navarrow：相対と左：

ちょうど位置を追加

.navarrow { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    float: left; 
    position: relative; 
    left: 0; 
    margin-right: -20px; 
}