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>

Answer 2

使用媒体查询的非常简单的方法定义自己的屏幕宽度，而不是767px

@media(max-width:767px) { .nowrap {display:block;} }

防止div被包裹在较小的HTML HTML CSS上

2 个答案: