Knockout JS模板HTML不能正确渲染

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

<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控件不对齐。

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