如何将两个箭头朝向号码？ [英] How to bring two arrows together towards the number?

问题描述

我有一个可以上/下投票的系统。我有两个箭头，箭头之间有一个数字。就像Stack OVerflow和Reddit一样。唯一的问题是我的箭头距离数字太远了。我尝试了填充/高度/我能想到的所有东西，但没有一个能起作用。他们都在一张桌子上，所以如果我把整个桌子的大小搞得一团糟。这是我的完整代码。

 < table class =table> 
 {％if posts％} 
 {％发布帖子％} 
< tr id =cell> 
< td class =vert-align> 
< div> 
< a href =/ post / {{post.slug}} / vote？is_up = 1class =vote> 
< span class =glyphicon glyphicon-triangle-toparia-hidden =true>< / span>< / a> 
< br /> 
 
< span class =numberstyle =height：1px; font-family：'Passion One'，cursive; 
>< h4 id =vote_count _ {{ post.slug}}> {{post.get_vote_count}}< / h4>< / span> <峰; br> 
 
< a href =/ post / {{post.slug}} / vote？is_up = 0class =vote> 
< span class =glyphicon glyphicon-triangle-bottomaria-hidden =true>< / span>< / a> 
< / div> 
< / td> 
  

我在下面有更多单元格。

这是我的CSS。

  .table #cell .vert-align a .glyphicon {
 font-size：1em; 
 display：inline-block; 
填充：0em; 
} 
 h4 {
 font-size：15px; 
} 
  

如果有人能告诉我我的js文件有什么问题，我将不胜感激。我试图让用户点击箭头箭头来改变颜色并保持改变，直到我点击箭头或其他箭头。对不起，如果它没有任何意义，我现在正在尝试使它（像堆栈溢出和reddit），当我点击箭头它改变颜色，但只要我点击其他东西，就像我的空白空间网络的颜色发生了变化。

  function vote（node）{
 var thread_id = node.attr（href）。split（'\\ \\ /'）[2]; 
 $ .ajax（{
 url：node.attr（href），
 dataType：json，
成功：函数（数据）{
 $ （#vote_count _+ thread_id）.html（data.count）; 
}，
错误：函数（data）{
 alert（data.responseJSON.error_message）; 
 } 
}）; （），
 
 $ b $（a.vote）。on（click，function（）{
 vote（$（this））; 
 return false ; 
}）; 
  

解决方案

在样式表中使用相对定位来定位箭头

  position：relative; left：-5px; 
  

I have a system that people can up/down vote. I have two arrows, and between the arrows there's a number. Just like Stack OVerflow and Reddit. Only problem is my arrows are too far apart from the number. I tried padding/height/ every thing I could think of but none of them works. They are all in a table, so if I mess up the whole table size gets messed up. Here's my full code.

<table class="table">
    {% if posts %}
      {% for post in posts %}
        <tr id="cell">
          <td class="vert-align">
          <div>
            <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span></a>
            <br />

<span class="number" style="height:1px; font-family: 'Passion One', cursive;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br>

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
        </div>
          </td>

I have more cells below.

this is my css.

.table #cell .vert-align a .glyphicon{
  font-size: 1em;
  display:inline-block;
  padding: 0em;
}
h4{
  font-size: 15px;
}

Also if anyone can tell me what's wrong with my js file I would be appreciated. I'm trying to make when user clicks the arrow the arrow to change the color and stay changed untill I click that arrow or the other arrow. sorry if it doesn't make sense I'm trying to make it (like stack-overflow and reddit) right now, when I click the arrow it changes the color but as soon as I click something else, like an empty space on my web the color gets changed.

function vote(node) {
    var thread_id = node.attr("href").split('\/')[2];
    $.ajax({
        url: node.attr("href"),
        dataType: "json",
        success: function(data) {
            $("#vote_count_"+thread_id).html(data.count);
        },
        error: function(data) {
            alert(data.responseJSON.error_message);
        }
    });
}

$("a.vote").on("click", function() {
    vote($(this));
    return false;
});

解决方案

Use relative positioning in the style sheet to position the arrows

position: relative; left: -5px;

这篇关于如何将两个箭头朝向号码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！