使用“display：block”，但无法将图像保留在与文本相同的水平面上

Question

我想将CSS3箭头保留在与某些文本相同的水平面上。换句话说，我想这一切都停留在同一水平面上...

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

我想“显示：块”会做的伎俩，但显然不是 - 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

最简单的解决将是让他们都显示inline-block的。

#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

我相信你正在寻找显示：内联或者使用一个而不是一个内联是它的正常状态。

下面是解释了它在全https://www.w3schools.com/css/css_display_visibility.asp

Answer 3

指导这可以用display: flex

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

做进一步了解Flexbox的（近几年的更好的CSS创新之一）here

Answer 4

你正在寻找的是display: inline，但你可以简化你的例子，只需交换<div> s对<span> s，因为<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>