3

我正在尝试在我的网站中使用三角形（纯 css）进行投票和投票。我已经创建了三角形，但无法将它们与书写好恶的文本对齐。

这张图片显示了三角形是如何出现的

我希望它们以最少的代码与文本对齐。

.css

.vote{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    cursor: pointer;
    vertical-align: middle;
}

.upvote{
    border-bottom: 10px solid #7d7d7d;
}
.downvote{
    border-top: 10px solid #7d7d7d;
}

.upvoted{
    border-bottom: 10px solid teal;
}
.downvoted{
    border-top: 10px solid #ab102f;
}

.html

<span id='votings'><span class='vote upvoted'></span>
<?php echo $current['likes'];?>
<span class='vote downvote'></span>
<?php echo $current['dislikes'];?>
<?php echo $current['action'];?>
</span>

用最少的添加代码帮助我做到这一点。任何帮助，建议，建议表示赞赏。谢谢！

我也尝试了负边距顶部。但没有帮助。

4

2 回答 2

5

添加display:inline-block到您的.vote类，因为默认情况下<span>是一个inline元素。

JSFiddle 演示

CSS

.vote{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    cursor: pointer;
    vertical-align: middle;
    display:inline-block;
}
于 2013-07-04T15:09:14.727 回答
1

如果我很好理解，只需添加display: inline-block;到.vote

http://jsbin.com/ehamoj/1/

于 2013-07-04T15:09:25.617 回答