html - 将 input-group-addon 定位在文本输入之上

Question

我需要完成简单的表格，但我正在处理 CSS 等问题。这是一张显示问题所在的图片

如您所见，Label 的位置在左侧 1px 处，并且按钮比输入大。我用同样input-group-addon的textarea，使用这种风格

    .input-group{
width: 100%;
}
    .input-group-addon{
width: 220px !important;
}
    .textarea-addon{
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 4px !important;
  border:1px solid #ccc !important;
  border-bottom: none !important;
}

它工作得很好，但是将它与文本输入一起使用看起来很难看。这是代码

 <div class="col-sm-12">
    <span class="input-group-addon textarea-addon">Account numbers</span>    
    <div class="input-group input-group-sm form-inline panel">                                                
        <input type="text" ng-model="model.accountNumber" id ="accountNumber" class="form-control" style="width:80%"> </input>                                                
        <input type="button" ng-click="add(accountNumber)" value="Add" class="btn btn" style="width:20%"></input>                                                                                                   
    </div> 
</div>

标签： htmlcsstwitter-bootstrap-3

Answer 1

希望这对您有所帮助，我已经为您的代码添加了新类

.inputgroup_flex {
    display: flex;
    align-items: stretch;
    border-width: 0;
}
.inputgroup_flex #accountNumber {
    height: 36px;
}

https://codepen.io/Thakur92411/pen/QZLqNZ