Javascript 敲除JS模板HTML未正确呈现

我有一个敲除模板，它工作得很好，直到我为了显示的目的对它做了一个小的更改。现在HTML呈现方式不同，这导致我的一些SCS无法应用某些样式。以下是当前模板：

<script type="text/html" id="dropDownTextBoxTemplate">
    <div class="top-level-div-class">
        <p class="paragraph-class">
            <div>
                <label data-bind="text: DisplayValue"></label>
            </div>
            <div>
                <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison"></select>
                <!-- ko if: SelectedComparison() === undefined -->
                <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                <!-- /ko -->
                <!-- ko ifnot: SelectedComparison() === undefined -->
                <input type="text" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                <!-- /ko -->
            </div>
        </p>
    </div>
</script>

我所做的更改是在标签、选择和输入控件周围添加div标记。下面是呈现的HTML

<div class="top-level-div-class">
    <p class="paragraph-class"></p>
    <div>
        <label data-bind="text: DisplayValue">My Display Value:</label>
    </div>
    <div>
        <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison" id="attendence" name="attendence">
            <option value="">Unselected</option>
            <option value="gtet">Greater than or equal to</option>
            <option value="ltet">Less than or equal to</option>
        </select>
        <!-- ko if: SelectedComparison() === undefined -->
        <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" id="attendence-value" name="attendence-value" data-min-value="0" data-max-value="99" data-format="range">
        <!-- /ko -->
        <!-- ko ifnot: SelectedComparison() === undefined -->
        <!-- /ko -->
    </div>
    <p></p>
</div>

---

正如您所见，段落标记是自己呈现的，而不是像模板中那样围绕内容呈现。当额外的div被删除时，段落标记会围绕所有其他内容呈现，这是所需的HTML输出，但当我这样做时，UI元素不会正确对齐。我尝试用span标记替换额外的div，HTML确实正确呈现，但UI控件再次失去了对齐。任何帮助都将不胜感激。

尝试将段落标记用作div。不允许将div括在段落标记内

这是你应该试试的零钱

 <script type="text/html" id="dropDownTextBoxTemplate">
        <div class="top-level-div-class">
            <div class="paragraph-class">
                <div>
                    <label data-bind="text: DisplayValue"></label>
                </div>
                <div>
                    <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison"></select>
                    <!-- ko if: SelectedComparison() === undefined -->
                    <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                    <!-- /ko -->
                    <!-- ko ifnot: SelectedComparison() === undefined -->
                    <input type="text" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </script>