css - 流体宽度div，右图

请看一下我的小提琴：

http://jsfiddle.net/gX5r9/

我希望在调整浏览器大小时div的宽度为100％，但是我希望图标图像位于其右侧。

 <div class="theDiv">
     <input type="text" /><img src="http://images.ilias.ca/Firefox-32x32.png" />
 </div>


.theDiv input {
 width:100%;
 height 32px;
 border= 1 px solid;
 border-radius: 6px;
 }

 .theDiv img{
  display: inline;
 }

最佳答案

这是使用背景图像执行此操作的一种方法：jsFiddle example

的HTML

<div class="theDiv">
    <input type="text" />
</div>

的CSS

.theDiv input {
   height:32px;
   border: 1px solid  #999;
   border-radius: 6px;
   width:100%;
   vertical-align:bottom;
}
.theDiv {
    background:url(http://images.ilias.ca/Firefox-32x32.png) 100% 0% no-repeat;
    padding-right:38px;
    height:40px;
}