Responisve ul列表。我如何解決這個問題？

Question

這裏是我的Demo

工作撥弄我如何使這一欄完全響應，這樣，當屏幕尺寸變少我想所有的元素留下來內聯，而不是堆積在下面彼此。

如何解決這個問題？

這裏是樣品標記

<div id="apologies-list"> 
       <ul id="apologies-list-content"> 
        <li><a tabindex="-1" href="#"> 
         <div class="user-avatar list-padding span12 clearfix" > 
          <div class="span1"> 
          <input class="case" name="case" type="checkbox" value=""> 
          </div> 
          <div class="span2"> 
          <img id="list-avatar" src="http://placehold.it/60x60" alt="" /> 
          </div> 
          <div class="span6"> 
          <span>Apologies initials</span> 
          <small>January 31, 2009 9:18 am</small> 
          </div> 
          <div class="span3 "> 
          <span class="badge badge-info custom-badge">2</span> 
          <i class="icon-trash"></i> 
          </div> 
         </div> 
         </a> 
        </li> 
</ul> 
</div> 

對於CSS請檢查我的小提琴。

Answer 1

使用CSS媒體查詢

 

    @media screen and (max-width:400px) 
    { 
    #apologies-list-content li div {display:inline-block} 
    }