html - 防止div被包裹在较小的屏幕html css上

Question

我有这个 html:

<b><li>DATA</li></b>
    <form>
        <ol type="a">
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label nowrap"><li>Name</li></label>
                <div class="nowrap">
                    <input type="text" readonly class="form-control-plaintext nowrap" id="staticEmail" value="{{ $kredit->debitur->name or '-' }}">
                </div>
            </div>
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label"><li>Alamat</li></label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="{{ $kredit->debitur->alamat or '-' }}">
                </div>
            </div>
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label"><li>Tempat / Tgl Lahir</li></label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="{{ $kredit->debitur->tempat_lahir or '-' }} / {{ $kredit->debitur->tanggal_lahir or '-' }}">
                </div>
            </div>
        </ol>
    </form>

输出是这样的:

a. Name                 FooBar
b. Alamat               Some Text
c. Tempat/Tanggal Lahir Some Other Text / somedate

但是当我调整屏幕大小时，它是这样的:

a. Name                 
   FooBar
b. Alamat               
   Some Text
c. Tempat/Tanggal Lahir
   Some Other Text / somedate

我不想要。我想强制它保持内联并改用水平滚动条。

我已经尝试过 white-space: nowrap; 和 display: inline-block; 但对于我来说，html 已经由其他人制作(有很多)而且我不能轻易地实现它们。如果可能，我想避免重写。

编辑:我最终使用了这个

    .nowrap {
        flex: 1;
        width: 300px;
        float: left;
    }

    .container {
        display: flex;
    }

不完美，但对我来说已经足够好了。

Answer 1

在直接父容器上使用 Flex。这是代码。

div.row{
  display:flex;
  flex-wrap:nowrap;
}
.row > label, .row > div{
  min-width: 150px;
  text-align:left;
}

<form>
        <ol type="a">
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label nowrap"><li>Name</li></label>
                <div class="nowrap">
                    <input type="text" readonly class="form-control-plaintext nowrap" id="staticEmail" value="{{ $kredit->debitur->name or '-' }}">
                </div>
            </div>
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label"><li>Alamat</li></label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="{{ $kredit->debitur->alamat or '-' }}">
                </div>
            </div>
            <div class="form-group row my-1">
                <label for="staticEmail" class="col-sm-4 col-form-label"><li>Tempat / Tgl Lahir</li></label>
                <div class="col-sm-8">
                    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="{{ $kredit->debitur->tempat_lahir or '-' }} / {{ $kredit->debitur->tanggal_lahir or '-' }}">
                </div>
            </div>
        </ol>
    </form>