时间戳

首页 > 解决方案 > 防止 div 被包裹在较小的屏幕上 html css

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

问题描述

我有这个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;
    }

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

标签： htmlcss

解决方案

在直接父容器上使用 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>

推荐阅读