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()">
▲
</div>
<div class="down-arrow" onclick="clickDownArrow()">
▼
</div>
</div>
<script>
function clickupArrow() {
alert('up-arrow clicked');
}
function clickDownArrow() {
alert('down-arrow clicked');
}
</script>
</body>
我正在尝试使用react-fontawesome图标在html的表头上显示上/下排序数组。问题是它们被显示了,但是它们之间有一个“空格”,看起来不太好。它们可以彼此靠近显示吗?
我尝试减小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>
);
}
答案 0 :(得分:0)
您可以像这样调整.up-arrow CSS:
.up-arrow {
cursor: pointer;
margin-bottom: -3px;
}
答案 1 :(得分:0)
不知道这是否对您有用,但这是使用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>