使用 "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 需要 "after"

.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

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

这里有一份完整解释的指南https://www.w3schools.com/css/css_display_visibility.asp

Answer 2

这可以通过 display: flex

来完成

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

详细了解 flexbox（近年来 css 更好的创新之一）here

Answer 3

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

如果你想让所有的东西更稳定和居中，你也可以使用 display: flex，默认情况下它是 children 水平展开和垂直拉伸。

#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

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

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

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

Using "display:block" but can't keep my image on the same horizontal plane as the text

html

css

block

display