玉段嵌套

Question

如何在我有的段落中放置多個嵌套元素

p
      label Item image
      .input-group
         input#addItemFile.form-control(type='file')
         input.form-control(type='text', readonly='')
         span.input-group-addon.btn.btn-default.btn-file.btn-primary Browse

並期望

<input class="form-control" id="addItemFile" type="file">
    <input class="form-control" type="text" readonly="">
    <span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span>

但是我明白了

<p>
<label>Item image</label>
</p>
<div class="input-group"><input class="form-control" id="addItemFile" type="file">
<input class="form-control" type="text" readonly="">
<span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span>
</div>

謝謝！

Answer 1

請嘗試以下操作：

 p  label Item image
      .input-group
         input#addItemFile.form-control(type='file')
         input.form-control(type='text', readonly='')
         span(class="input-group-addon btn btn-default btn-file btn-primary") Browse

上面的代碼對我來說很好。 在Firefox中的輸出：

<p> label Item image<div class="input-group"><input id="addItemFile" type="file" class="form-control"><input type="text" readonly="" class="form-control"><span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span></div></p>

Answer 2

您擁有的代碼將使用段落內的div生成標記。 問題在於HTML禁止div出現在此處，因此瀏覽器將隱式在div之前結束該段落，然后丟棄該段落的結束標簽。

您需要改用段落中允許的元素。

例如span.input-group