使用「display：block」，但無法將圖像保留在與文本相同的水平面上

我想將CSS3箭頭保留在與某些文本相同的水平面上。換句話說，我想這一切都停留在同一水平面上...使用「display：block」，但無法將圖像保留在與文本相同的水平面上

<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); 
}

我認爲這是扔東西了。無論如何，我怎樣才能將我的箭頭保持在與文本相同的水平面上？

來源

2017-08-08 Dave

最簡單的解決將是讓他們都顯示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>

來源

2017-08-08 20:01:31 LGSon

我相信你正在尋找顯示：內聯或者使用一個而不是一個內聯是它的正常狀態。

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

來源

2017-08-08 19:58:52

指導這可以用display: flex

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

做進一步瞭解Flexbox的（近幾年的更好的CSS創新之一）here

來源

2017-08-08 19:59:32 WookieCoder

爲什麼使用而不是「彎曲」，「內聯」，由其他人則建議？ – Dave

'flex'很好，如果你還想讓你的內容垂直對齊。它給你更多的權力。 [這裏]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）是一個關於flexbox的好文章。 – lumio

@Dave有幾個原因，其中一個僅僅是一種文體選擇。另一個原因是flexbox可以真正適應解決80-90％的佈局問題（以我的經驗），所以我選擇只掌握'flex'，所以我的代碼是一致的。 – WookieCoder

你正在尋找的是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>

來源

2017-08-08 19:59:34 lumio

使用「display：block」，但無法將圖像保留在與文本相同的水平面上

回答

相關問題