作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
预期结果:“在 X% 和 Y% 之间”,都在同一行上。
这适用于常规表单字段,但不适用于输入组:
between
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
最佳答案
使用类 d-inline-flex align-items-center w-auto
在 input-group
:
input.form-control {
width: 3em;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group d-inline-flex align-items-center w-auto">
between <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
and <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
关于css - 如何将两个 Bootstrap 输入组放在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61017882/
我是一名优秀的程序员,十分优秀!