Question

所以我试图让它像List Bullet一样工作，但是在导航按钮的END处。

我遇到的问题是黑三角定位太远了。它比我的文字（黑色BG）更高。

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

我尝试了很多不同的东西，但我完全被难过了。我可能会忽略一些愚蠢的东西，但它可能需要一些我不知道的严肃工作。

感谢您的帮助。

包含链接不适合您。见下文。

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}

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

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

为了使身高达到25px。

但你有另一条规则（我想知道为什么）：

a{width:100%}

在设置display:inline-block之前，锚点已display:inline，因此规则不执行任何操作。

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

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

定位内联块＆＃34;三角形＆＃34;导航链接后

1 个答案: