IE11表格單元格高度

Question

我有一個類似表格的布局，但似乎無法使所有“單元格”都具有相同的高度。

這是我到目前為止所擁有的，有人看到我所缺少的嗎？ 還是應該只使用帶有子級內聯包裝的塊顯示包裝？

 .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> 

Answer 1

嘗試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>