输入滑块的样式问题

Question

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.

Answer 1

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>

Answer 2

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