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

Answer 1

希望这对您有所帮助，我将新类添加到您的代码中

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

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