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

Question

我有 JSF 自动生成的 HTML 代码。 我有 1 个带有嵌套跨度数的父 div，在每个跨度中我有 2 个 div，一个用于标签，一个用于输入。 问题是其中一个输入的宽度比其他输入更大，所以我希望包含此输入的跨度在新行中呈现。但它开始在第一行渲染，输入从新行渲染。如何让他们在新的路线上在一起？

我在 Google 上搜索了很多，尝试了 display: inline-block、white-space: 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>