CSS的三角形对象在文本之上

Question

我有一个用CSS制作的三角形用于下拉菜单 HTML：

<span class="top-link link-bar-link">Affiliate Content 
    <span class="caret"></span>
</span>

CSS：

    #top-links-bar{
    padding:30px;
    border:0px solid black;
    background: linear-gradient(gray, white);
}
    .caret{
     border-left:5px solid transparent;
     border-right:5px solid transparent;
     border-top:5px solid black;
     display:inline;


}

正如我所预期的那样，三角形正在显示，但它位于文本上方而不是旁边。

Answer 1

.caret {
    ...
    display: inline-block;
    vertical-align: top; /* or 'middle' */
    margin-top: 5px;
}

<强> Demo

Answer 2

<强> FIDDLE:

试试这个：

CSS：

#top-links-bar {
    padding:30px;
    border:0px solid black;
    background: linear-gradient(gray, white);
}
.top-link {
    position:relative;
}
.caret {
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid black;
    display:inline-block;
    vertical-align:middle;
}