Question

像stackoverflow投票箭头和点一样，我已经做了类似的事情，但是我的两个箭头中的点不在中间，它太丑了。我该如何纠正？

<td class="vert-align">
  <div>
    <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
    <span style="font-size:1.5em;" <i class="fa fa-arrow-up"></i>
    </span></a><br>
    <h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4>     <br>
    <a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
    <span style="font-size:1.5em;" <i class="fa fa-arrow-down"></i></span></a>
  </div>
</td>

编辑

所以我有这个

 <td class="vert-align">
        <div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
 <span style="font-size:1.5em;"> <i class="fa fa-arrow-up"></i>
 </span></a><br>

<h4 id="vote_count_{{ post.slug }}" style="margin-top:10px;margin-bottom:10px;">{{ post.get_vote_count }}</h4>
 <br>

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span style="font-size:1.5em;" <i class="fa fa-arrow-down"></i></span></a>
        </div>
        </td>

我做了这个

    #vote_count_{{ post.slug }}{
      font-size: 34px;
      font-weight: bold;
      line-height: 40px;
      margin: 0;
    }
    table{
      text-align: center;
      box-sizing: border-box;
    }

then I get nothing. 
IF I put h4 instead of id, then it works but I have other h4

Answer 1

尝试这样的事情。

h4{
  font-size: 34px;
  font-weight: bold;
  line-height: 40px;
  margin: 0;
}
table{
  text-align: center;
  box-sizing: border-box;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<table>

<td class="vert-align">
        <div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
 <span style="font-size:2em;" <i class="fa fa-arrow-up"></i>
 </span></a>

<h4 id="vote_count_{{ post.slug }}">4</h4>    

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span style="font-size:2em;" <i class="fa fa-arrow-down"></i></span></a>
        </div>
        </td>
 </table>

修改

如果您正在寻找像投票系统这样的堆栈溢出，请按照
进行操作
<强> FIDDLE

$('.vote.up').click(function () { $('span.upvote').toggleClass('on'); }); $('.vote.down').click(function () { $('span.downvote').toggleClass('on'); });

h4.vote-count{ font-size: 30px; font-weight: bold; line-height: 40px; margin: 0; } table{ text-align: center; box-sizing: border-box; } span.upvote{ display: inline-block; overflow: hidden; width: 40px; height: 25px; cursor: pointer; background: url('http://i.stack.imgur.com/iqN2k.png'); background-position: 0 -25px; } span.downvote{ background : url('http://i.imgur.com/DdDtGWS.png'); display: inline-block; overflow: hidden; width: 40px; height: 25px; cursor: pointer; background-position: 0 0px; } span.upvote.on { background-position: 0 2px; } span.downvote.on { background-position: 0 -30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table> <td class="vert-align"> <div> <a href="#" class="vote up"> <span class="upvote" style="font-size:1.5em;" </span></a> <h4 class="vote-count" id="vote_count_{{ post.slug }}">4</h4> <a href="#" class="vote down"> <span class="downvote" style="font-size:1.5em;" </span></a> </div> </td> </table>

Answer 2

如果没有看到小提琴，我可以立即看到您没有关闭span标签，请按以下方式重新调整：

<td class="vert-align">
    <div>
        <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
            <span style="font-size:1.5em;"><i class="fa fa-arrow-up"></i></span>
        </a>
        <br>
        <h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4>
        <br>
        <a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
            <span style="font-size:1.5em;"><i class="fa fa-arrow-down"></i></span>
        </a>
    </div>
</td>

以下是Font Awesome的修改小提琴：https://jsfiddle.net/h5xhsaLe/3/

您还可以使用CSS缩小<h4>元素上方和下方的填充：

h4 {
    margin: 5px 0;
}

Answer 3

尝试给予这样的保证金。

<h4 id="vote_count_{{ post.slug }}" style="margin-top:10px;margin-bottom:10px;">{{ post.get_vote_count }}</h4>

将内容放在两个跨度之间的中间位置

3 个答案: