如何显示像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

看看这个，你可能会找到你正在寻找的东西。

Answer 2

你可以使用html按钮和任何javascript变量来显示计数。在按钮标记中添加onclick属性并调用JavaScript方法，该方法增加了按钮上的变量值类似的向下计数方法只是减少方法中的值

https://codeshare.io/Xv5xB

Answer 3

使用bootstrap lib [http://getbootstrap.com/]，它具有更多功能并遵循此代码。

<div className = "row">
					<div className = "u-full-width u-cf link-item">
						<div className = "u-pull-left link-vote">
							<div className = "u-pull-left vote-buttons">
							<div className = "arrow-up upvote" onClick={this._onVoteUp}></div>
							<div className = "arrow-down downvote" onClick=   {this._onVoteDown}></div>
						</div>
							<span className="points">{this.state.points}</span>
						</div>
						<div className="u-pull-right link-content" onClick={this._onLineClick}>
							{this.props.title}
						<span className="u-pull-right info">{domain}</span>
						</div>
					</div>
				</div>

UpVote，DownVote等的编写方法