スパンタグのコンテンツが次の行に表示されるのはなぜですか？

Question

必須フィールドとして表示するために*を追加したいと思います。入力したテキストの後にspanタグを置くと、同じ行に表示されます。

.holder_options_1 { 
 
    color: red !important; 
 
}

<div class="col-sm-6" style="padding-left: 11px;"> 
 
    <input type="text" name="tags" id="xyz">&nbsp;&nbsp; 
 
    <span class="holder_options_1">*</span> 
 
</div>

が、私は、入力タイプのファイルの後に同じspanタグを配置するときには、次の行に示します。

.holder_options_1 { 
 
    color: red !important; 
 
}

<div class="col-sm-6" style="padding-left: 11px;"> 
 
    <input type="file" name="fileupload" accept=".jpg,.png,.jpeg" id="fileToUpload" style="height:33px">&nbsp;&nbsp; 
 
    <span class="holder_options_1">*</span> 
 
</div>

なぜそれがそのように来ていますか？ 同じ行にもそのスパンタグが必要です。それを行うにはどうすればいいですか？説明してください。 ありがとうございました。

Answer 1

デフォルトでは、スパンタグはdisplay: inlineです。彼の動作はテキストのようです。親が小さすぎる場合は、次の行に行きます。