使用"display:block"但无法将我的图像保持在与文本相同的水平面上

Question

我想将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);
}

我认为这是在抛弃事情。 无论如何，如何将箭头保持在与文本相同的水平面上？

Answer 1

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

#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>

Answer 2

我相信您正在寻找 display：inline 或者使用 a 而不是 a，因为内联是它的正常状态。

这是一个完整的指南，可以完整地解释它 https://www.w3schools.com/css/css_display_visibility.asp

Answer 3

您正在寻找的是display: inline，但您可以通过将<div>与<span>交换来简化您的示例，因为默认情况下<span>标签是display: inline

如果你想让一切更加稳定和居中，你也可以使用display: flex它把它的孩子水平展开，

默认情况下垂直拉伸它们。

#oneDayChange {
display: flex;
justify-content: flex-start; /* align to the left */
align-items: center; /* center content vertically */
}
.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 
<span id="downArrow" class="downArrow arrow"></span>
- 1.5780377548310014 / -0.01013426671732404 % 
</div>

Answer 4

这可以通过display: flex来完成

<div id="oneDayChange">
...
<div style="display:flex; flex-direction: row;">
...
</div>

在这里阅读更多关于flexbox(近年来更好的css创新之一(的信息