logo标签列表

如何正确显示表格的排序上下箭头？

javascripthtmlcssreactjs
3

Sort arrows relatively close to each other 

.up-arrow {
  cursor: pointer;
  /* height: 10px; */
}

.down-arrow {
  cursor: pointer;
}
<!DOCTYPE html>
<head>
</head>
<body>
  <div>
    <div class="up-arrow" onclick="clickupArrow()">
      &#9650;
    </div>
    <div class="down-arrow" onclick="clickDownArrow()">
      &#9660;
    </div>
  </div>
  <script>
    function clickupArrow() {
      alert('up-arrow clicked');
    }

    function clickDownArrow() {
      alert('down-arrow clicked');
    }
  </script>
  
</body>

我试图在HTML中使用React-Fontawesome图标来展示升/降排序的数组，但问题是它们之间会有一个“空格”，看起来不太美观。它们能否靠近一些展示？
我尝试减小div的高度，但这会导致用户需要点击其中任何一个div时出现问题。
displayArrows = (sortKey, sortAsc, sortDesc) => {
    return (
      <div className="arrows-wrapper-div">
        <div
          style={{ cursor: 'pointer' }}
          role="button"
          onClick={(e) => sortAsc(e, sortKey)}
          tabIndex={0}
        >
          <FontAwesomeIcon icon={faCaretUp} />
        </div>
        <div
          style={{ cursor: 'pointer' }}
          role="button"
          onClick={(e) => sortDesc(e, sortKey)}
          tabIndex={0}
        >
          <FontAwesomeIcon icon={faCaretDown} />
        </div>
      </div>
    );
  }

现在可以使用上下排序箭头

5
你能否提供一个完整的可工作示例，以便我们更好地帮助你？重新创建这个示例有点繁琐，而且需要一定的时间。 - Constantin Groß
好的，让我举个例子。 - Hafsa Saleem
我已经包含了一个非常简单的例子。看一下div自然具有这样的高度，以便它们看起来分开。 - Hafsa Saleem
没有添加边距或填充；是 div 内容的高度导致了这个问题。尝试调整两个 div 的 line-height 可以使它们之间产生差异，但仍然不如我所期望的那样接近。 - Hafsa Saleem
@Alen.Toma 它可以用来减少空间，但当您想要点击其中任何一个时会引起问题。两个中的一个或两个都不起作用。 - Hafsa Saleem
显示剩余3条评论
2个回答
5

我不确定这个方法是否适用于您，但以下是一个使用CSS的简单解决方案。

.up-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-bottom: solid 7px black;
    border-top-width: 0;
    cursor: pointer;
}

.down-arrow {
    width: 0;
    height: 0;
    border: solid 5px transparent;
    background: transparent;
    border-top: solid 7px black;
    border-bottom-width: 0;
    margin-top:1px;
    cursor: pointer;
}
<!DOCTYPE html>
<head>
</head>
<body>
  <div>
    <div class="up-arrow" onclick="clickupArrow()">

    </div>
    <div class="down-arrow" onclick="clickDownArrow()">

    </div>
  </div>
  <script>
    function clickupArrow() {
      alert('up-arrow clicked');
    }

    function clickDownArrow() {
      alert('down-arrow clicked');
    }
  </script>
  
</body>

0
您可以像这样调整您的.up-arrow CSS：
.up-arrow {
  cursor: pointer;
  margin-bottom: -3px;
}
哇！你是怎么发现的？！ - PoM
它没有起作用。没有边距存在。它是具有高度的内容。 - Hafsa Saleem
看看我的修改。如果你把它变成负边距会怎样？ - Robby
是的，它可以减少空间，但是在这种情况下，单击箭头会产生不可预测的结果。在这种情况下，向上箭头不再可点击。 - Hafsa Saleem
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接