重叠与负边际和浮动

Question

我有一个如下所示的导航栏：

最近又决定用CSS替换它中的PNG箭头。 CSS箭头重叠的唯一问题不能按预期工作。下一个导航块与前一个箭头重叠，隐藏它，而它是应该与下一个导航块重叠的箭头（使用图像时就是这种情况）。如果我从.navarrow中移除负边距，则会在上图中显示导航块之间的间隙。

有没有办法可以达到预期的效果（之前.navarrow重叠了后面的.navblock）？ 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/4/

Answer 2

你可能想要稍微改变你的标记来做到这一点。

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

好吧，我已经把它想出来了。

刚刚将位置：相对和左：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;
}

Answer 4

我希望我的例子可以帮助你

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