响应式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}
    }