Вложенность нефритового абзаца

#javascript #node.js #pug #markup

#javascript #node.js #pug #разметка

Вопрос:

Как разместить более 1 вложенного элемента в абзаце, который у меня есть

 p 
 изображение элемента метки 
.группаввода 
 введите#addItemFile.form-элемент управления (тип='файл')
 input.form-элементуправления(тип='text', только для чтения=")
 span.input-group-addon.btn.btn-default.btn-file.btn-основной просмотр

И ожидать

 <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>

Спасибо!

Ответ №1:

Имеющийся у вас код будет генерировать разметку с div внутри абзаца. Проблема в том, что HTML запрещает отображение там divs, поэтому браузер неявно завершит абзац перед div, а затем отбросит тег end для абзаца.

Вместо этого вам нужно использовать элемент, который разрешен внутри абзаца.

например span.input-group

Ответ №2:

Попробуйте вместо этого следующее:

  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>

1. aramboyajyan.github.io/online-jade-template-editor говорит «[jade] неожиданный токен «отступ»», когда я пытаюсь это сделать.

2. Хммммм, вероятно, это проблема с тем, как я это воспроизвел. К сожалению, JSFiddle в данный момент не подходит для меня, что усложняет ситуацию, но я сделаю еще один заход и отредактирую рабочий код, поскольку концепция решения верна…

3. Исправлено. На моем сервере все работает нормально с правильным отступом (отказался от JSFiddle).

4. У него та же проблема, что и у исходного кода. Он пытается поместить <div> внутри абзаца, что недопустимо.

5. Я могу понять, если спецификации этого не позволяют, но приведенный выше код действительно вставляет div внутри <p> элемента, когда Jade переносится в HTML.