如何强制将2个嵌套的div一起携带到新行

Question

我有JSF自动生成的HTML代码。 我有1个具有嵌套范围的div父div，在每个范围中我有2个div，一个用于标签，一个用于输入。 问题是输入之一的宽度大于其他输入的宽度，所以我想要包含此输入的跨度以新行呈现。但是它开始在第一行渲染，输入从新的一行渲染。如何使他们在新的生产线上在一起？

我在Google上搜索了很多，尝试显示：内联块，空格：nowrap，float：left和我在此处和网络中发现的其他CSS，但没有任何帮助。

<div id="block" class="ui-panelgrid-content ui-widget-content ui-grid ui-grid-responsive" style="padding-right: 10px">
    <span id="cell4" class="ort-cell id-cell">
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-1 ui-xl-1" style="display: flex;">
            <label>Label4</label>
        </div>
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-4 ui-xl-3">
            <input></input>
        </div>
    </span>
    <span id="cell5" class="ort-cell id-cell">
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-1 ui-xl-1" style="display: flex;">
            <label>Label5</label>
        </div>
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-4 ui-xl-3">
            <input></input>
        </div>
    </span>
    <span id="cell6" class="ort-cell id-cell">
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-1 ui-xl-1" style="display: flex;">
            <label>Label6</label>
        </div>
        <div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-4 ui-xl-5">
            <input></input>
        </div>
    </span>
</div>

实际结果在屏幕截图上，但我希望label6的输入内容换行，因为输入内容的大小大于其他内容。

@media screen and (min-width: 90.063em) {
.ui-xl-1 {
    width: 15.3333%;
}

.ui-xl-2 {
    width: 13.6667%;
}

.ui-xl-3 {
    width: 17.6667%;
}

.ui-xl-5 {
    width: 39.6667%;
}

.ui-xl-6 {
    width: 47.2222%;
}

}

Answer 1

您可以尝试一下，

<div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-1 ui-xl-1" style="display: inline-block;">
  <label>Label6</label>
</div>
<div class="ui-panelgrid-cell ui-g-12 ui-md-12 ui-lg-4 ui-xl-5" style="display: inline-block;">
  <input></input>
</div>