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;
}

如何重新调整input-group-addon的大小

2 个答案: