0

Trying to get my outputs to show up in line with the words explaining them, right now, they are being shunted to the next line, which I dont want.

Taco Stands:    Cost per <b><output class="output6">0</output></b> tacos<br>
TacoTaco <output class="output1">0</output>
Los Hermanos Tacos <output class="output2">0</output>
Natcho Taco<output class="output3">0</output>
Taco Bell<output class="output4">0</output>
Chipolte<output class="output5">0</output>

https://jsfiddle.net/xnpqd8cs/

I also cant seem to figure out how to have the output numbers have commas for better readability.

damann
  • 63
  • 7

2 Answers2

2

Wrap every line with output in a div and remove the display: block; from the outputs. You should have a block container for each row containing the text and the output to be separated like you want it.

<div>Taco Stands:    Cost per <b><output class="output6">0</output></b> tacos</div>
<div>TacoTaco <output class="output1">0</output></div>
<div>Los Hermanos Tacos <output class="output2">0</output></div>
<div>Natcho Taco<output class="output3">0</output></div>
<div>Taco Bell<output class="output4">0</output></div>
<div>Chipolte<output class="output5">0</output></div>
Patrik Alexits
  • 987
  • 9
  • 24
2

It is because of output { display: block; }
Block will display the elements as the separate line. Either remove this or use output { display: inline; } :)

Vipul Sharma
  • 525
  • 9
  • 23
  • Doh! I was so concentrated on the js I completely forgot that line in the css! – damann Oct 19 '18 at 18:37
  • 1
    Yeah! It happens! Please accept the answer if it worked! :) – Vipul Sharma Oct 19 '18 at 18:38
  • It worked great! Any ideas on the second part of my question? how to have the output numbers have commas for better readability? – damann Oct 19 '18 at 18:41
  • 1
    Seems my work is already done here! https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript Have a look! – Vipul Sharma Oct 19 '18 at 18:43