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之前的段落，然后丢弃段落的结束标记。

您需要使用段落中允许的元素。

e.g。 span.input-group

玉段嵌套

2 个答案: