html - Div对齐不想工作

Question

HTML:

<ul class="posts">
  <li>
      <a href="">
        <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
      </a>
      <div class="entry">
        <a href="">Nam ultricies dolor eu velit varius scelerisque.</a>
        <span class="date">January 1st, 2013</span>
      </div>
      <div class="floatlimit"></div>
  </li>      
</ul>

CSS:

.blog-container li,ol,ul {  
    list-style: none;
    padding: 0;
    margin-left: 0;
}
.
.blog-container .ui-tabs .ui-tabs-panel {
        position: relative;
        display: block;
        border: none;
    }

  .posts li {
    margin: 0;
    padding: 0;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(0,0,0,0);    
        display:block;
  }

 .posts li:last-child {
        margin: 0;
    }

   .posts img {       
        margin: 0px 0px 0 0;
        width: 50px;
        height: 50px;
        display: inline-block;
    }


    .entry .date {
        display: block;
        color: #808080;
    }

但它没有在左侧显示 img，在右侧显示标题文字。它在一个容器中，这是它的样子:

有什么想法吗？感谢您的帮助!

http://jsfiddle.net/9fcN5/

Answer 1

只是一个小改动

.posts img {       
    margin: 0px 0px 0 0;
    width: 50px;
    height: 50px;
    display: inline-block;
    float:left;
}

Working Fiddle