HTML出力タグが間違った行に表示される

Question

出力タグがhtmlでどのように動作するかを確認するために、少しテストフォームを書きました。ここに私の形があります。

<form onsubmit="return false" oninput="d.value = (a.valueAsNumber + b.valueAsNumber + c.valueAsNumber)"> 
    <legend>Test</legend> 

    <p><label for="a">Enter A:</label> 
    <input type="number" min="0" id="a" value=0 name="a"></p> 

    <p><label for="b">Enter B:</label> 
    <input type="number" min="0" id="b" value=0 name="b"></p> 

    <p><label for="c">Enter C:</label> 
    <input type="number" min="0" id="c" value=0 name="c"></p> 

    <p>Sum: <strong><output name="d" for="a b c">0</output></strong></p> 
</form> 

しかし、私は期待している形で出力を得ていません。これはテストウェブサイトからコードを実行するときに表示されます。 （確かに、書式設定は上書きコピーしません。）

Test 
Enter A: 3 

Enter B: 4 

Enter C: 5 

Sum: 
12 

私は合計が正しいそれのラベルと同じ行、上に表示すべきだと思うのでしょうか？なぜそれが新しい行に印刷されるのか、という考えはありますか？

Answer 1

ブートストラップのCSSは、outputのスタイルをdisplay:blockに設定します。あなた自身のCSSでそれを上書きする必要があります。例えば

：

output { 
    display: inline-block; 
}