css - 与输入框连接时，附加组件高度未调整

Question

我在输入框的前面使用输入组插件。在修复它时，附加组件的高度比盒子高一点。如何将插件固定为输入框的大小？-

 <div class="form-group">
                <div class="input-group">
                        <div class="input-group-addon">
                            <i class="icon-home"></i>
                        </div>
                    <input class="form-control" type="text" placeholder=" ">
                </div>
            </div>

Answer 1

用于插件的默认图像具有更大的高度。因此，为了将其与输入框匹配，我将相同的图像更改为适当的大小。

在其位置使用此图像http://i.imgur.com/sCrdOXO.png

检查小提琴

通过以下方式使用代码：

.icon-home {
   background:url('http://i.imgur.com/sCrdOXO.png') no-repeat;
   width:23px;
   height:22px;    
   display:block;
}

.input-group-addon {
   display:block;
   float:left;
}

#input_css {
   display: inline;
   margin-top:0px;
}

希望这能回答你的问题