html - 如何调整输入组插件的大小

Question

您好，我有一些输入选项，如下所示，我试图让它们都具有相同的宽度。

我尝试通过外部 css 继承默认样式:

.addon
{
    width: 50%;
    background-color: yellow;
}

HTML:

<div class="well">
                                    <div class="input-group">
                                        <span class="input-group-addon">Field </span>
                                        <select type="input" class="form-control" ng-model="final_data.info"
                                                ng-options="m.id as m.title for m in chartlist"
                                                required ng-cloak></select>
                                    </div><br>
                                    <div class="input-group">
                                        <span class="input-group-addon">Function </span>
                                        <select type="input" class="form-control" ng-model="final_data.info"
                                                ng-options="m.id as m.title for m in chartlist"
                                                required ng-cloak></select>
                                    </div><br>
                                    <div class="input-group">
                                        <span class="input-group-addon">Lookup </span>
                                        <select type="input" class="form-control" ng-model="final_data.info"
                                                ng-options="m.id as m.title for m in chartlist"
                                                required ng-cloak></select>
                                    </div><br>
                                    <div class="input-group">
                                        <span class="input-group-addon">Keyword </span>
                                        <input type="input" class="form-control" placeholder="Field" ng-model="final_data.table_name">
                                    </div><br>
</div>

但它会重新调整整个输入选项的大小，而不是输入字段的标题。谁能建议我解决这个问题的方法？提前致谢。

Answer 1

我创建了一个 jsfiddle对于你的问题这是一个 CSS 片段!

.well{
  margin-left:20px;
  margin-top:20px;
  width:300px;
  height:auto;
}
.well .input-group{
  width:100%;
  clear:both;
}
.well .input-group .input-group-addon{
  background-color:#ccc;
  padding:5px;
  width:20%;
  float:left;
}
.well .input-group input,.well .input-group select {
    width: 72%;
    float: left;
    background-color: transparent;
    height: 28px;
    padding: 0;
    border-radius: 0;
    background-color: white;
    border: 1px solid #CCC;

}

确保 label 标签比输入更靠前