css - 在导航链接之后定位内联 block "Triangle"

Question

所以我试图让它像列表元素符号一样工作，但在导航按钮的末尾。

我遇到了问题，因为黑色三 Angular 形将自身定位得太高。它比我的文字更高(带黑色 BG)。

下面是我的问题的一个例子。

http://dabblet.com/gist/3483670

我尝试了很多不同的东西，但我完全被难住了。 可能我忽略了一些愚蠢的事情，但它可能需要一系列我不知道的解决方法。

感谢所有的帮助。

如果链接对您不起作用。见下文。

CSS

 a {font: 19px/26px 'Exo',Arial,sans-serif;
    list-style: none outside none;
    margin: 0 0 0 -10px;
    padding: 0 0 58px;
    font-weight:100;
    text-transform: uppercase;
    width: 100%;
    text-decoration:none;}

    a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}

.triangle { width: 0;
    height: 0; 
    background:no-repeat right center;
    border-top: 0px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid black;
    display:inline-block;}

HTML

<a href="index.html" rel="catagory"><span class="plus">+</span> <span>HOME</span></a><span class="triangle"></span>

Answer 1

可以添加

a[rel="catagory"] {
    vertical-align:middle;
    display:inline-block;
    width:auto;
    line-height:25px;
}
.triangle {
    vertical-align:middle
}

解释:

对齐它们的部分是

a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}

但是anchor的高度是22px，所以我们需要

a[rel="catagory"] {
    display:inline-block;
    line-height:25px;
}

为了使高度为25px。

但是你有另一个规则(我想知道为什么):

a{width:100%}

在设置 display:inline-block 之前， anchor 有 display:inline，因此该规则不执行任何操作。

但是现在它可以工作了，我们想禁用它，所以我们需要

a[rel="catagory"] {
    width:auto;
}