html - 使用“display:block”，但不能将我的图像与文本保持在同一水平面

我想将CSS3箭头与某些文本保持在同一水平面上。换句话说，我希望所有这些都保持在同一水平面上...

    <div style="display:block">
        <div id="downArrow" class="downArrow arrow"></div>
    - 1.5780377548310014 / -0.01013426671732404 %
    </div>

我认为“ display：block”可以解决问题，但显然不能-https://jsfiddle.net/6m7vegwc/。唯一的问题是箭头的CSS需要“之后”

.downArrow:after {
    background: linear-gradient(120deg, transparent 63%, #fff 63%),
    linear-gradient(-120deg, transparent 63%, #fff 63%),
    linear-gradient(to top, #ccc, #000);
}

而且我认为这正在抛弃一切。无论如何，如何使箭头与文字保持在同一水平面？

最佳答案

最简单的解决方法是使它们全部显示为内联块。

#oneDayChange > div {
  display: inline-block;
  vertical-align: middle;
}
.arrow {
  display: inline-block;
  vertical-align: middle;
}
.arrow:after {
  height: 50px;
  width: 50px;
  display: inline-block;
  content: '';
}

.upArrow:after {
  background: linear-gradient(60deg, transparent 63%, #fff 63%), linear-gradient(-60deg, transparent 63%, #fff 63%), linear-gradient(to bottom, #ccc, #000);
}

.downArrow:after {
  background: linear-gradient(120deg, transparent 63%, #fff 63%), linear-gradient(-120deg, transparent 63%, #fff 63%), linear-gradient(to top, #ccc, #000);
}

<div id="oneDayChange">
  One day change
  <div>
    <div id="downArrow" class="downArrow arrow"></div>
    - 1.5780377548310014 / -0.01013426671732404 %
  </div>
</div>