我有这个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;
}
不完美,但足以满足我的情况。
最佳答案
在直接父容器上使用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>