html - 如何显示像 Reddit 这样的上/下投票元素？

Question

我正在尝试获得类似于 Reddit 或 HackerNews 投票的类似外观，其中向上/向下箭头被堆叠。我尝试的是以下外观:

我的代码如下:

HTML

<ul class="list-unstyled">
      <li class="entry">
          <div class="row">
               <div class="col-sm-2 entry__rank">
                     <span class="pull-left">1.</span>
                      <i class="fa fa-icon fa-caret-up fa-2x pull-left"></i>
                      <i class="fa fa-icon fa-caret-down fa-2x pull-left"></i>
                 </div>
                  <div class="col-md-9">
                      <span class="entry__title">
                         <a href="#">This is a great billboard</a>
                       </span>
                  </div>
             </div>
         </li>
    </ul>

CSS

.entry {
  padding: 5px;
  margin-bottom: 20px;
}
.entry__rank {
  font-size: 20px;
  font-weight: bold;
  color: grey;
  padding: 5px 0 5px 0;
  margin-top: -10px !important;
}
.entry__title {
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, Arial;
  font-size: 16px;

}

.entry__title a {
  color: #285ddf !important;
}

期望的外观

像 Stackover 流投票这样的事件会起作用。

Answer 1

编辑以提供更好的插件:

使用以下可能是更好且不那么臃肿的解决方案:

https://github.com/janosgyerik/upvotejs

Reddit 实际上有他们的代码可供人们使用，如果他们愿意的话，基本上可以创建他们自己的 Reddit 克隆:

https://github.com/reddit/reddit

通读一下，您可能会准确地找到您要找的东西。