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>
);
}
不知道这是否适合你，但这是一个简单的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>你像这样调整你的.up-arrow CSS：
.up-arrow {
cursor: pointer;
margin-bottom: -3px;
}