輸入滑塊的樣式問題

Question

為了使我的輸出與解釋它們的單詞一致，現在，它們正被轉移到下一行，這是我所不希望的。

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/

我似乎也無法弄清楚如何使輸出數字帶有逗號以提高可讀性。

Answer 1

在div中將每行與輸出一起包裝，然后移除display: block; 從輸出。 對於每一行，您都應該有一個塊容器，其中包含要按需分隔的文本和輸出。

<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

這是因為output { display: block; } output { display: block; }
塊將元素顯示為單獨的行。 要么刪除它，要么使用output { display: inline; } output { display: inline; } :)