html - 在同一行显示元素

Question

我将每个元素都对齐在同一行上:

<i class="fa fa-btc"></i> <span id="counter"></span> <div id="btcvalue"> ~ $100.34 <span class="slight"><i class="fa fa-play fa-rotate-270 text-success"> </i> 0.000000690BTC</span> </div>

看起来像这样:

看看他们在 2 条不同的线路上如何？现在我已经尝试了很多东西，比如 display:block;和 inline ，但似乎都不起作用。我很确定由于 <div> 而被切到下一行，但无法移动或移除。谁能帮忙，谢谢!

Answer 1

div 是一个block 元素。 block 元素是垂直定向的，而不是 inline。您可以简单地将 div 元素更改为 span。

<i class="fa fa-btc"></i> <span id="counter"></span> 
<span id="btcvalue"> 
    ~ $100.34 <span class="slight"><i class="fa fa-play fa-rotate-270 text-success"> </i> 0.000000690BTC</span>
</span>

或者您可以设置 div 的样式，使其显示在同一行。 (例如 display: inline-block)

如果元素仍然不在同一行，则可能是自动换行造成的。您可能需要将所有内容包装在一个附加元素中并关闭自动换行。 (例如 white-space: nowrap)