0

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

我遇到了黑三角定位太高的问题。它比我拥有的文字（带黑色背景）更高。

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

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

1 回答 1

2

你可以加

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锚之前 has display:inline，所以该规则什么都不做。

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

a[rel="catagory"] {
    width:auto;
}
于 2012-08-26T21:37:29.663 回答