html - 如何将文字向上移动到图片旁边？

Question

遇到了一个小问题，我尝试了 line-height 但是没有用。也许我想多了？

.blog-container ul{ 
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-container .entry {
    display: inline-block;
    width: 170px;

    padding: 0 0 0 0;

}

.posts li {
        margin: 0;
        padding: 0;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(0,0,0,0);
        -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        display:block;
        line-height: 1.2em;     
}

.blog-container img {
    display: inline-block;
    width: 40px;
    height: 40px
}

.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}

HTML:

<ul class="posts">
    <li>                                     
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                    
    </li>
    <li>
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                       
    </li>                                                               
 </ul>

图片:

和想法家伙？谢谢!

http://jsfiddle.net/3EKJR/ (它没有在 jsfiddle 中显示问题，但在上图中，这就是它所显示的。

Answer 1

好的，这似乎对我有用。我使用了 float:left

FIDDLE

.blog-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-container .entry {
    display: block;
    width: 170px;
    padding: 0 0 0 0;
    float:left;
}
.posts li {
    height:35px;
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    display:block;
    line-height: 1.2em;
    clear:both;
}
.blog-container img {
    display: block;
    float:left;
    width: 40px;
    height: 40px;
    margin-right:10px;
}
.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}