Question

我想把chevron-up和chevron-down图标放在一个非常靠近数字的位置，我只是不能正确地做，请帮忙。

这就是我所拥有的：

   ▲     
   5 Read Post
   ▼

我希望箭头更接近数字（非常接近）。我已经达到了部分解决方案，但问题出现的时候数字更大，我希望箭头位于数字的中间位置，但我得到的结果如下：

   ▲     
   534 Read Post
   ▼

＆＃34;部分解决方案＆＃34;我有这个fiddle。另外，我无法对齐文字＆＃34; Read Post＆＃34;在投票的号码中，你会看到小提琴。

我是一名后端开发人员，现在，对CSS非常糟糕，如果有人可以向我解释一下我做错了什么，我会很感激。

Answer 1

您可以执行以下操作：http://codepen.io/pageaffairs/pen/aGcyE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

<style>

p {
  width: 340px;
  height: 50px;
  font-weight: bold;
}

a, span {display: inline-block; vertical-align: middle;}

span {position: relative; padding: 20px 0;}

span::before, span::after {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    font-family:'FontAwesome';
}

span::before {
    content: "\f077";
    top: 0;
}

span::after {
    content: "\f078";
    bottom: 0;
}

</style>
</head>
<body>

<p><span>255</span> <a href="#">Read Post</a></p>

</body>
</html>

Answer 2

使用<p>标记可能会迫使您的文字转到下一行，我建议将divs与float:left，text-align:center和{{1一起使用边距。

根据你的小提琴，我把它改成了这个作为起点，希望你可以从这里调整它：

HTML：

auto

CSS：

<a class = "link_wrapper">
<span class = "votes_post">
    <i class = "up fa fa-chevron-up"></i>
    <div>
    255
    </div>
    <i class = "down fa fa-chevron-down"></i>
</span>
<div class = "text">Read Post.</div>
</a>

}

CSS。正确放置数字上方和下方的图标

2 个答案: