Question

why the input dislocated in IE? It’s ok in Firefox and Chrome. The input does not appear to the right under the image. Since I can’t post images here, I’ll put “xxx” instead of the image url in the code and css and a screenshot url in the comment. Thanks a lot

<li class="img">
    <div class="pic">
        <img width="117px" height="70px" src="attachment/201202/21/1_1329785854VWAO.jpg.thumb.jpg">
        <div  class="remove" style="display: none;">
        </div>
    </div>
    <input type="text" placeholder="say something" value="" class="txt">
</li>

 li.img {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 102px;
    overflow: visible;
    padding: 0 4px;
    position: relative;
    width: 117px;
}
li {
    float: left;
    margin-left: 10px;
}
li {
    list-style: none outside none;
}
.pic {
    margin-bottom: 5px;
    overflow: hidden;
}
.txt {
    border: 1px solid #DEDEDE;
    color: #999999;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-left: 0;
    padding-left: 6px;
    width: 108px;
}

Answer 1

Put the text input box in its own div and float the div to the left:

<li class="img">
    <div class="pic">
        <img width="117px" height="70px" src="attachment/201202/21/1_1329785854VWAO.jpg.thumb.jpg">
        <div  class="remove" style="display: none;">
        </div>
    </div>
    <div class="txt">
        <input type="text" placeholder="say something" value="" class="txt" >
    </div>
</li>

---

li.img {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 102px;
    overflow: visible;
    padding: 0 4px;
    position: relative;
    width: 117px;
}
li {
    float: left;
    margin-left: 10px;
}
li {
    list-style: none outside none;
}
.pic {
    margin-bottom: 5px;
    overflow: hidden;
}
div.txt {
    float: left;
}
input.txt {
    border: 1px solid #DEDEDE;
    color: #999999;    
    height: 20px;
    line-height: 20px;
    margin-left: 0;
    padding-left: 6px;
    width: 108px;
}