div {
margin: 10px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
vertical-align: top;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow-up"></span> An up arrow
</div>
<div>
<span class="arrow-down"></span> A down arrow
</div>
https://jsfiddle.net/dl1od5tz/8/
我想对齐它们,以使箭头的底部与文本的底部对齐。垂直空地似乎无能为力,设置边距和填充也不会这样做。我没有想法。谢谢!
如何使它们每个inline-block
?
div {
margin: 10px;
}
.arrow {
display: inline-block;
}
.up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid red;
vertical-align: bottom;
}
<div>
<span class="arrow up"></span>
<span>An up arrow</span>
</div>
<div>
<span class="arrow down"></span>
<span>A down arrow</span>
</div>