2

想知道是否有人知道我如何将三角形图标直接h2放置在标签文本之后，目前我使用 :after 并将其浮动到右侧，但因为这个三角形h2位于display: block右侧。因为我有一个需要拉伸的边框底部，所以100%我不能用它display: inline-block来得到我的结果。想知道我是否可以实现这一点而不必添加空跨度等

小提琴：http: //jsfiddle.net/7bCwv/

HTML：

<h2 class="definition-heading">Tools for Internet Users</h2>

CSS：

    h1, .carousel-caption, h2, h3, h4 {
    font-family:"Proxima Nova Semi Bold", Arial, Helvetica, sans-serif;
    color: #454545;
    font-size: 16px;
}
h2 {
    border-bottom: 1px solid #b7b7b7;
    padding: 10px 0;
}
.definition-heading:after {
    content:'';
    border-bottom: 5px solid transparent;
    border-left: 7px solid #e15646;
    border-top: 5px solid transparent;
    height: 0;
    width: 0;
    float: right;
    position: relative;
    top: 7px;
    margin-left: 9px;
}
4

2 回答 2

4

如果您inline-block在生成的内容上使用，它应该完全符合您的要求。看到这个 fork，CSS 变化：

.definition-heading:after {
   display: inline-block; /* add this */
   /* float: right;
   top: 7px; remove these */
}

这使：

使用内联块的屏幕截图

于 2013-04-12T10:00:56.847 回答
4

@CherryFlavourPez 给出了最好的答案，我还想建议您设置三角形图标的样式vertical-align: middle;，以便您的标题和三角形看起来不错。

编辑

您也可以不使用上述方法显示三角形图标，这里有一个更简单的方法：

<h1>heading text here<span>►&lt;/span></h1>

现在为您的跨度设计样式。（三角形图标是从字符映射中复制的）

于 2013-04-12T10:21:55.643 回答