html - 响应式 ul 列表。我该如何处理？

Question

这是我正在研究的 fiddle 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，请查看我的 fiddle 。

Answer 1

使用CSS媒体查询

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