1

I have every element aligned up on the same line:

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

Looks like this:

enter image description here

See how they are on 2 different lines? Now I have already tried many things like display:block; and inline, but neither seem to work. I am pretty sure it is being cut to the next line because of the <div>, but that can not be moved or removed. Can anyone help, thanks!

TymeBomb
  • 117
  • 2
  • 12
  • Duplicate of https://stackoverflow.com/questions/9067892/how-to-align-two-elements-on-the-same-line-without-changing-html but I'm out of votes – TylerH Nov 09 '20 at 18:50

1 Answers1

3

A div is a block element. Block elements are oriented vertically rather than inline. You could simply change the div element into a 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>

Or you can style the div so that it is displayed on the same line. (e.g. display: inline-block)

If the elements are still not on the same line it could be caused by word wrap. You may need to wrap everything in an additional element and turn of word wrap. (e.g. white-space: nowrap)

Jake Holzinger
  • 5,783
  • 2
  • 19
  • 33