强制父div在css中调整其子项大小

Question

我正在尝试用更大的div封装带有图标的输入。我希望这个div宽度与输入的大小完全相同。

到目前为止，这是我的代码：

 <div>
    <input type="text">
    <i class='glyphicon glyphicon-search'></i>
 </div>

这是我的CSS：

div {
    background: blue;
    display: inline-block;
}
i {
    left: -30px;
    color: #fff;
}
input {
    position: relative;
    width: 100px;
    background: transparent;
}

使用jsfiddle工作： http://jsfiddle.net/dwfh16me/3/

这里的问题是div获得输入的宽度+图标，即使图标处于绝对位置。 如何确保不考虑图标宽度？

Mabny谢谢

Answer 1

演示 - http://jsfiddle.net/victor_007/dwfh16me/4/

为position:absolute和父i

添加position:relative

i.glyphicon {
   position:absolute;
   right:6px;
   top:3px;
   color: #fff;
}