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/]＆amp;请遵循此代码。

<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＆amp; amp;等

如何显示像Reddit这样的投票项目？

3 个答案: