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

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;

}

确保标签标签高于输入

Answer 2

你的 CSS 选择器必须更加具体
试试这个：

.input-group-addon {
    min-width:100px; // You can adapt this 
    background-color: yellow;
    text-align:left;
}