html - IE11 表格单元格高度
问题描述
我有一个表格式布局,但似乎无法让所有“单元格”都具有相同的高度。
这是我到目前为止所拥有的,有人看到我缺少什么吗?还是我应该只使用带有子内联包装器的块显示包装器?
.input-group {
position: relative;
display: table;
height: 18px;
}
.table-row{
display: table-row;
height: 18px;
}
input.form-control {
border: 1px solid #ccc;
padding: 6px 0 6px 12px;
border-right-width: 0;
width: 50px;
height: 18px;
background-color: #fff;
display: table-cell;
}
.input-group .input-group-addon {
padding: 6px 12px 6px 0;
height: 18px;
border: 1px solid #ccc;
border-left-width: 0;
background-color: #fff;
display: table-cell;
}
.input-group .fdsa {
background-color: #ec7404;
color: #fff;
padding: 7px 12px;
cursor: pointer;
display: table-cell;
}
.fa-euro:before, .fa-eur:before {
content: "€";
}
<div class="input-group">
<div class="table-row">
<input class="form-control" type="number" id="AmountInput" value="50">
<span class="input-group-addon">
<i class="fa fa-eur"></i>
</span>
<span class="fdsa" id="BtnFormSubmit">
Submit
</span>
</div>
</div>
解决方案
尝试display: flex
.input-group {
position: relative;
display: block;
height: 18px;
}
.table-row{
display: flex;
height: 18px;
}
input.form-control {
border: 1px solid #ccc;
padding: 6px 0 6px 12px;
border-right-width: 0;
width: 50px;
height: 18px;
background-color: #fff;
display: block;
}
.input-group .input-group-addon {
padding: 6px 12px 6px 0;
height: 18px;
border: 1px solid #ccc;
border-left-width: 0;
background-color: #fff;
display: block;
}
.input-group .fdsa {
background-color: #ec7404;
color: #fff;
padding: 7px 12px;
cursor: pointer;
height: 100%;
display: block;
}
.fa-euro:before, .fa-eur:before {
content: "€";
}
<div class="input-group">
<div class="table-row">
<input class="form-control" type="number" id="AmountInput" value="50">
<span class="input-group-addon">
<i class="fa fa-eur"></i>
</span>
<span class="fdsa" id="BtnFormSubmit">
Submit
</span>
</div>
</div>
推荐阅读
- laravel-6 - 一次又一次的图片上传失败
- javascript - nodejs和tampermonkey之间的通信
- ios - 如何解释 Fabric 崩溃和 Xcode 崩溃之间的巨大差异?
- django-rest-framework - 在 Django Rest Framework 中,获取请求用户的所有选定组
- c# - 实体框架核心:将带有列表的对象添加到 DbContext 会导致空列表
- ruby-on-rails - 运行 git push Heroku 时出现问题,Ruby 版本是 2.6.4,但您的 Gemfile 指定了 2.6.3
- go - Beego POST 方法总是寻找模板文件
- amazon-web-services - AWS MSK Cloud Formation 标签问题
- c# - 在c#中使用while循环旁边的类方法
- c# - 如何在实体框架核心中按 id 遍历所有子项?