html - 强制父 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 获得输入的宽度 + 图标，即使图标处于绝对位置。 我如何确保它不考虑图标宽度？

马尼谢谢

Answer 1

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

为 i 和父 position:relative 添加 position:absolute

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